Круглое меню – Коллекция потрясающих меню для сайта | html, css и javascript (jQuery)

Как создать круглое меню для сайта на CSS3

/* Для правильного позиционирования меню */

#menu {

position: relative;

width: 230px;

margin: 0px auto;

top: 100px;

left: 37px;

}

 

/* Используем свойство overflow: hidden;, поэтому надо создать имитацию тени */

.faux-shadow {

position: absolute;

content: " ";

width: 150px;

height: 150px;

top: 0px;

left: 0px;

box-shadow: 0 0 50px rgba(0,0,0,0.3);

border-radius: 300px;

-webkit-transition: all 0.4s linear;

-moz-transition: all 0.4s linear;

-ms-transition: all 0.4s linear;

-o-transition: all 0.4s linear;

transition: all 0.4s linear;

z-index: -9999;

}

 

/* Кнопка в центре меню служит для активации меню */

#on-button {

border-radius: 100px;

width: 150px;

height: 150px;

color: #fff;

float: left;

box-sizing: border-box;

-moz-box-sizing: border-box;

cursor: pointer;

background-color: #313b3d;

pointer-events: none;

font-size: 5em;

text-shadow: 0 1px 1px rgba(0,0,0,0.3);

box-shadow: inset 0 -125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);

}

 

/* При наведении курсора мыши */

#on-button:hover {

box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2);

}

 

/* При нажатии кнопки мыши*/

#on-button:active {

box-shadow: inset 0 125px 100px -100px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0,0,0,0.2),

inset 0 0 30px rgba(0,0,0,0.3);

}

 

/* Элемент spans внутри кнопки будет вращаться */

#on-button > span {

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

-webkit-transition: -webkit-transform 0.2s linear;

-moz-transition: -moz-transform 0.2s linear;

-ms-transition: -moz-transform 0.2s linear;

-o-transition: -moz-transform 0.2s linear;

transition: -moz-transform 0.2s linear;

display: block;

width: 122px;

height: 122px;

background: #313b3d;

border-radius: 120px;

pointer-events: auto;

position: absolute;

z-index: 3;

top: 0;

left: 0;

box-sizing: border-box;

-moz-box-sizing: border-box;

padding: 34px;

margin: 14px;

box-shadow: inset 0 -112px 100px -100px rgba(0, 0, 0, 0.5);

}

 

/* Изменение тени при наведении курсора мыши, что бы она соответствовала тени контейнера */

#on-button:hover > span {

box-shadow: inset 0 112px 100px -100px rgba(0, 0, 0, 0.5);

}

 

/* Вращение последнего элемента span, чтобы он был перевернутым */

#on-button > span:last-of-type {

-webkit-transform: rotateY(180deg);

-moz-transform: rotateY(180deg);

-o-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

transform: rotateY(180deg);

}

 

/* Добавляем псевдо элемент с белым фоном, который будет создавать

иллюзию, что кнопка имеет отверстие */

#on-button:after {

position: absolute;

content: " ";

top: 0;

left: 0;

width: 120px;

height: 120px;

margin: 15px;

border-radius: 120px;

background: #fff;

z-index: 2;

}

Лучшие круговые меню для сайта (код)

Здравствуйте, круговое меню на сайте выглядит оригинально и превлекательно, представляю Вам подборку кода для его создания:

Скачать исходники для статьи можно ниже

1. “codepen.io/mahmoud-nb/pen/pbNBYP”

2. “codepen.io/lenymo/pen/rwmBGq”

3. “codepen.io/CreativePunch/pen/lAHiu”

4. “codepen.io/r8n5n/pen/doJGZz”

5. “codepen.io/taboo09/pen/GaFjz”

6. “codepen.io/maskedcoder/pen/zqgpr”

7. “codepen.io/marlenesco/pen/XbNByy”

8. “codepen.io/didac/pen/ZKZpmQ”

9. “codepen.io/logrithumn/pen/yMwYXX”

10. “codepen.io/tgrant54/pen/lBHwK”

11. “codepen.io/jet/pen/LwiGu”

12. “codepen.io/Stan59/pen/nmHGx”

13. “codepen.io/hadarweiss/pen/WvEXeK”

14. “codepen.io/thebabydino/pen/Bzuti”

15. “codepen.io/tknomad/pen/JhqdD”

16. “codepen.io/farnabaz/pen/Otley”

17. “codepen.io/abergin/pen/gbYNYe”

18. “codepen.io/__barnett/pen/VvjyrO”

19. codepen.io/lamiajoyee/pen/QEWxRQ

20. “codepen.io/jjmartucci/pen/WryZeR”

21. “codepen.io/chrissimari/pen/qmnkF”

22. “codepen.io/rojus/pen/role”

23. “codepen.io/Harder/pen/boZwjN”

24. “codepen.io/mbrandorff/pen/FBwhv”

25. “codepen.io/simgooder/pen/BNLGXm”


26. “codepen.io/Span4ev/pen/OQpqgO”

На этом всё! Красивых Вам менюшек!

Круглое сворачиваемое меню на CSS3

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css') all;

 

.menu-toggler {

display: block;

width: 40px;

height: 40px;

z-index: 2;

opacity: 0;

cursor: pointer;

}

 

.menu-toggler:hover + label,

.menu-toggler:hover + label:before,

.menu-toggler:hover + label:after {

background: white;

}

 

.menu-toggler:checked + label {

background: transparent;

}

 

.menu-toggler:checked + label:before,

.menu-toggler:checked + label:after {

top: 0;

width: 40px;

-webkit-transform-origin: 50% 50%;

transform-origin: 50% 50%;

}

 

.menu-toggler:checked + label:before {

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

}

 

.menu-toggler:checked + label:after {

-webkit-transform: rotate(-45deg);

transform: rotate(-45deg);

}

 

.menu-toggler:checked ~ ul .menu-item {

opacity: 1;

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(1) {

-webkit-transform: rotate(0deg) translateX(-110px);

transform: rotate(0deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(2) {

-webkit-transform: rotate(60deg) translateX(-110px);

transform: rotate(60deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(3) {

-webkit-transform: rotate(120deg) translateX(-110px);

transform: rotate(120deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(4) {

-webkit-transform: rotate(180deg) translateX(-110px);

transform: rotate(180deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(5) {

-webkit-transform: rotate(240deg) translateX(-110px);

transform: rotate(240deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item:nth-child(6) {

-webkit-transform: rotate(300deg) translateX(-110px);

transform: rotate(300deg) translateX(-110px);

}

 

.menu-toggler:checked ~ ul .menu-item a {

pointer-events: auto;

}

 

.menu-toggler + label {

width: 40px;

height: 5px;

display: block;

z-index: 1;

border-radius: 2.5px;

background: rgba(255, 255, 255, 0.7);

-webkit-transition: top 0.5s, -webkit-transform 0.5s;

transition: top 0.5s, -webkit-transform 0.5s;

transition: transform 0.5s, top 0.5s;

transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;

position: absolute;

display: block;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: 190px 170px;

}

 

.menu-toggler + label:before,

.menu-toggler + label:after {

width: 40px;

height: 5px;

display: block;

z-index: 1;

border-radius: 2.5px;

background: rgba(255, 255, 255, 0.7);

-webkit-transition: top 0.5s, -webkit-transform 0.5s;

transition: top 0.5s, -webkit-transform 0.5s;

transition: transform 0.5s, top 0.5s;

transition: transform 0.5s, top 0.5s, -webkit-transform 0.5s;

content: "";

position: absolute;

left: 0;

}

 

.menu-toggler + label:before {

top: 10px;

}

 

.menu-toggler + label:after {

top: -10px;

}

 

.menu-item:nth-child(1) a {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

 

.menu-item:nth-child(2) a {

-webkit-transform: rotate(-60deg);

transform: rotate(-60deg);

}

 

.menu-item:nth-child(3) a {

-webkit-transform: rotate(-120deg);

transform: rotate(-120deg);

}

 

.menu-item:nth-child(4) a {

-webkit-transform: rotate(-180deg);

transform: rotate(-180deg);

}

 

.menu-item:nth-child(5) a {

-webkit-transform: rotate(-240deg);

transform: rotate(-240deg);

}

 

.menu-item:nth-child(6) a {

-webkit-transform: rotate(-300deg);

transform: rotate(-300deg);

}

 

.menu-item {

position: absolute;

display: block;

top: 0;

bottom: 0;

right: 0;

left: 0;

margin: 150px;

width: 80px;

height: 80px;

display: block;

opacity: 0;

-webkit-transition: 0.5s;

transition: 0.5s;

}

 

.menu-item a {

display: block;

width: inherit;

height: inherit;

line-height: 80px;

color: rgba(255, 255, 255, 0.7);

background: rgba(255, 255, 255, 0.2);

border-radius: 50%;

text-align: center;

text-decoration: none;

font-size: 40px;

pointer-events: none;

-webkit-transition: .2s;

transition: .2s;

}

 

.menu-item a:hover {

box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);

color: white;

background: rgba(255, 255, 255, 0.3);

font-size: 44.44444px;

}

Круглое вращающееся меню на JQuery, зеленый стиль!

В этом уроке мы создадим невероятно красивое вращающееся меню на основе JQuery скрипта от Zachary Johnson, который может быть найден здесь.

Мы создадим горизонтальное меню jquery с маленькими иконками, которые будут вращаться при наведении курсора. Кроме того, каждый пункт меню будет выдвигаться и показывать другие подпункты, вроде ссылок, формы поиска или даже можно вставить картинку, при желании (в общем, что угодно). Ещё советую посмотреть на другое, выдвигающееся меню навигации на JQuery – возможно, оно Вам понравиться больше.

Итак, давайте начнем, и Вы поймете, что на самом деле это не так сложно как кажется.

HTML код

Для этого меню мы не будем создавать маркированный список ul, но сделаем все на основе тегов div. Все меню будет обернуто в div с классом menu.

Каждый пункт меню будет иметь иконку, как элемент ссылки, а также весь контент с классом item_content, включающий в себя заголовок и все подпункты, или форма поиска:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<div>

    <div>

        <a></a>

        <div>

            <h3>Контакты</h3>

            <p>

                <a href="#">E-mail |</a>

                <a href="#">Twitter |</a>

                <a href="#">Facebook</a>

            </p>

        </div>

    </div>

    <div>

        <a></a>

        <div>

            <h3>Помощь</h3>

            <p>

                <a href="#">FAQ |</a>

                <a href="#">Онлайн помощь |</a>

                <a href="#">Тикет</a>

            </p>

        </div>

    </div>

    <div>

        <a></a>

        <div>

            <h3>Поиск</h3>

            <p>

                <input type="text"></input>

                <a href="">Искать</a>

            </p>

        </div>

    </div>

    <div>

        <a></a>

        <div>

            <h3>Галерея изображений</h3>

            <p>

                <a href="#">Категории</a>

                <a href="#">Архив</a>

                <a href="#">Избранное</a>

            </p>

        </div>

    </div>

    <div>

        <a></a>

        <div>

            <h3>Начать здесь</h3>

            <p>

                <a href="#">Сервисы |</a>

                <a href="#">Портфолио |</a>

                <a href="#">Цены</a>

            </p>

        </div>

    </div>

</div>

Изначально div с классом item, будет таких же размеров, как и иконка, но при наведении расширится, и мы увидим его содержимое.

CSS стилизация

Общий стили для всего меню:

.menu{

    width:800px;

    height:52px;

    position:relative;

    top:200px;

    left:100px;

    font-family: "Trebuchet MS", sans-serif;

    font-size: 16px;

    font-style: normal;

    font-weight: bold;

    text-transform: uppercase;

}

все элементы внутри item будут позиционированы float:right;, так как мы будем расширять пункты меню слева:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.item{

    position:relative;

    background-color:#f0f0f0;

    float:right;

    width:52px;

    margin:0px 5px;

    height:52px;

    border:2px solid #ddd;

    -moz-border-radius:30px;

    -webkit-border-radius:30px;

    border-radius:30px;

    -moz-box-shadow:1px 1px 3px #555;

    -webkit-box-shadow:1px 1px 3px #555;

    box-shadow:1px 1px 3px #555;

    cursor:pointer;

    overflow:hidden;

}

Далее мы определяем стили иконок (зададим класс для каждой ссылки) следующим образом:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

.link{

    left:2px;

    top:2px;

    position:absolute;

    width:48px;

    height:48px;

}

.icon_home{

    background:transparent url(../images/home.png) no-repeat top left;

}

.icon_mail{

    background:transparent url(../images/mail.png) no-repeat top left;

}

.icon_help{

    background:transparent url(../images/help.png) no-repeat top left;

}

.icon_find{

    background:transparent url(../images/find.png) no-repeat top left;

}

.icon_photos{

    background:transparent url(../images/photos.png) no-repeat top left;

}

Для других элементов, которые могут содержаться внутри, мы пропишем такие стили:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

.item_content{

    position:absolute;

    height:52px;

    width:220px;

    overflow:hidden;

    left:56px;

    top:7px;

    background:transparent;

    display:none;

}

.item_content h3{

    color:#aaa;

    text-shadow: 1px 1px 1px #fff;

    background-color:transparent;

    font-size:14px;

}

.item_content a{

    background-color:transparent;

    float:left;

    margin-right:7px;

    margin-top:3px;

    color:#bbb;

    text-shadow: 1px 1px 1px #fff;

    text-decoration:none;

    font-size:12px;

}

.item_content a:hover{

    color:#0b965b;

}

.item_content p {

    background-color:transparent;

    display:none;

}

.item_content p input{

    border:1px solid #ccc;

    padding:1px;

    width:155px;

    float:left;

    margin-right:5px;

}

С параметрами text-shadow, мы создали хороший эффект выгравированного текста. Ладно, все это хорошо, но ведь без Javascript это никуда не годится! Идем далее…

Javascript скрипт

Сначала нам нужно подключить скрипты JQuery от Zachary Johnson, а затем добавим следующие функции:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

$('.item').hover(

    function(){

        var $this = $(this);

        expand($this);

    },

    function(){

        var $this = $(this);

        collapse($this);

    }

);

function expand($elem){

    var angle = 0;

    var t = setInterval(function () {

        if(angle == 1440){

            clearInterval(t);

            return;

        }

        angle += 40;

        $('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);

    },10);

    $elem.stop().animate({width:'268px'}, 1000)

    .find('.item_content').fadeIn(400,function(){

        $(this).find('p').stop(true,true).fadeIn(600);

    });

}

function collapse($elem){

    var angle = 1440;

    var t = setInterval(function () {

        if(angle == 0){

            clearInterval(t);

            return;

        }

        angle -= 40;

        $('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);

    },10);

    $elem.stop().animate({width:'52px'}, 1000)

    .find('.item_content').stop(true,true).fadeOut()

          .find('p').stop(true,true).fadeOut();

}

Чтобы облегчить задачу, мы создали две функции:

  • функция расширения expand – будет вращать значок вокруг себя 4 раза (360 х 4 = 1440). Мы также расширим пункт меню с помощью анимации увеличения его ширины. Затем мы показываем его содержимое.
  • функция закрытия collapse – будет вращать значок назад, в первоначальное положение, уменьшает ширину и скрывает содержимое пункта меню.

И вот все готово! Я надеюсь, что вам понравилось! Жду Ваших комментариев!


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко

Круглое меню через плагин Flower Navigation на jQuery

FavoriteLoadingДобавить в закладки52096113

Скачать [RAR] [77 КБ]

Данный плагин позволяет создавать стильную навигацию для вашего сайта

Для начала посмотрите ДЕМО

Установка:

1#: После </head> на нужных страницах вставляйте:

<link href="/css/style.css" rel='StyleSheet' /> <script type="text/javascript" src="/js/jquery-ui.js"></script> <script src="/js/script.js" type='text/javascript'></script>

<link href="/css/style.css" rel='StyleSheet' />

<script type="text/javascript" src="/js/jquery-ui.js"></script>

<script src="/js/script.js" type='text/javascript'></script>

 

2#: Следующий код сразу после предыдущего:

<nav> <ul> <li><a href="#"><img src="Ссылка на картинку"/></a></li> <li><a href="#"><img src="Ссылка на картинку"/></a></li> <li><a href="#"><img src="Ссылка на картинку"/></a></li> <li><a href="#"><img src="Ссылка на картинку"/></a></li> <li><a href="#"><img src="Ссылка на картинку"/></a></li> <li><a href="#"><img src="Ссылка на картинку"/></a></li> </ul> <a>Кликни</a> </nav>

<nav>

<ul>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

<li><a href="#"><img src="Ссылка на картинку"/></a></li>

</ul>

<a>Кликни</a>

</nav>

Осталось лишь залить два JS файла из прикреплённого архива в папку js и один CSS файл в папку css

Если вас не устраивает абсолютное позиционирование меню по центру - адаптируйте style.css под свои потребности

Оригинальное круглое меню сайта ZR

  
  Mail  
    
    
  Mail 1  
  Mail 2  
  Mail 3  
  Mail 3  
    
    
    
  Главная  
  Draw  
    
    
  Draw 1  
  Draw 2  
  Draw 3  
    
    
    
  Talk  
    
    
  Talk 1  
  Talk 2  
  Talk 3  
  Talk 4  
    
    
    
  Фото  
    
    
  Фото 1  
  Фото 2  
  Фото 3  
  Фото 4  
  Фото 5  
    
    
    
  Cart  
    
    
  Cart 1  
  Cart 2  
  Cart 3  
  Cart 4  
  Cart 5  
    
    
    
  Cash  
    
    
  Cash 1  
  Cash 2  
  Cash 3  
    
    
    
  Audio  
    
    
  Audio 1  
  Audio 2  
  Audio 3  
    
    
    

<style>ul.squared {  
  background: url("http://zornet.ru/CSS-ZORNET/ZR/1372966522_circle.gif") repeat scroll 0 0 transparent;  
  height: 300px;  
  list-style: none outside none;  
  margin: 0 auto;  
  padding: 0;  
  position: relative;  
  width: 300px;  
}  
ul.squared ul {  
  left: -9999px;  
  list-style: none outside none;  
  margin: 0;  
  padding: 0;  
  position: absolute;  
}  
ul.squared li {  
  float: left;  
  height: 100px;  
  width: 100px;  
}  
ul.squared li.mid {  
  margin-right: 100px;  
}  
ul.squared li a {  
  -moz-transition: all 0.25s ease 0s;  
  color: #666666;  
  display: block;  
  font-family: arial,sans-serif;  
  font-size: 12px;  
  height: 50px;  
  padding: 25px;  
  text-decoration: none;  
  width: 50px;  
}  
ul.squared li a b {  
  left: -9999px;  
  position: absolute;  
}  
ul.squared li a img {  
  border: 0 none;  
  width: 100%;  
}  
ul.squared li:hover > a {  
  cursor: pointer;  
  height: 64px;  
  padding: 18px;  
  width: 64px;  
}  
ul.squared li:hover > a > b {  
  background: none repeat scroll 0 0 #FFFFFF;  
  display: block;  
  height: 48px;  
  left: 125px;  
  line-height: 50px;  
  position: absolute;  
  text-align: center;  
  top: 125px;  
  width: 48px;  
}  
ul.squared li:hover ul {  
  height: 150px;  
  left: 75px;  
  top: 75px;  
  width: 150px;  
  z-index: 100;  
}  
ul.squared li ul li {  
  -moz-transition: opacity 1.5s ease 0s;  
  height: 50px;  
  opacity: 0;  
  position: absolute;  
  width: 50px;  
}  
ul.squared li ul li.p1 {  
  left: 100px;  
  top: 0;  
}  
ul.squared li ul li.p2 {  
  left: 100px;  
  top: 50px;  
}  
ul.squared li ul li.p3 {  
  left: 100px;  
  top: 100px;  
}  
ul.squared li ul li.p4 {  
  left: 50px;  
  top: 100px;  
}  
ul.squared li ul li.p5 {  
  left: 0;  
  top: 100px;  
}  
ul.squared li ul li.p6 {  
  left: 0;  
  top: 50px;  
}  
ul.squared li ul li.p7 {  
  left: 0;  
  top: 0;  
}  
ul.squared li ul li.p8 {  
  left: 50px;  
  top: 0;  
}  
ul.squared li:hover ul li.s1 {  
  -moz-transition-delay: 0s;  
  opacity: 1;  
}  
ul.squared li:hover ul li.s2 {  
  -moz-transition-delay: 0.25s;  
  opacity: 1;  
}  
ul.squared li:hover ul li.s3 {  
  -moz-transition-delay: 0.5s;  
  opacity: 1;  
}  
ul.squared li:hover ul li.s4 {  
  -moz-transition-delay: 0.75s;  
  opacity: 1;  
}  
ul.squared li:hover ul li.s5 {  
  -moz-transition-delay: 1s;  
  opacity: 1;  
}  
ul.squared li ul li a {  
  height: 30px;  
  padding: 10px;  
  width: 30px;  
}  
ul.squared li:hover ul li:hover > a {  
  height: 48px;  
  opacity: 1;  
  padding: 1px;  
  width: 48px;  
}  
ul.squared li:hover ul li:hover > a b {  
  display: block;  
  height: 50px;  
  line-height: 50px;  
  position: absolute;  
  text-align: center;  
  width: 50px;  
}  
ul.squared li:hover ul li.p1:hover > a b {  
  left: -50px;  
  top: 50px;  
}  
ul.squared li:hover ul li.p2:hover > a b {  
  left: -50px;  
  top: 0;  
}  
ul.squared li:hover ul li.p3:hover > a b {  
  left: -50px;  
  top: -50px;  
}  
ul.squared li:hover ul li.p4:hover > a b {  
  left: 0;  
  top: -50px;  
}  
ul.squared li:hover ul li.p5:hover > a b {  
  left: 50px;  
  top: -50px;  
}  
ul.squared li:hover ul li.p6:hover > a b {  
  left: 50px;  
  top: 0;  
}  
ul.squared li:hover ul li.p7:hover > a b {  
  left: 50px;  
  top: 50px;  
}  
ul.squared li:hover ul li.p8:hover > a b {  
  left: 0;  
  top: 50px;  
}  
ul.squared table {  
  border-collapse: collapse;  
  margin-bottom: -1px;  
}  
ul.squared li a:hover {  
  cursor: pointer;  
  height: 64px;  
  padding: 18px;  
  width: 64px;  
}  
ul.squared a:hover b {  
  background: none repeat scroll 0 0 #FFFFFF;  
  display: block;  
  height: 48px;  
  left: 125px;  
  line-height: 50px;  
  position: absolute;  
  text-align: center;  
  top: 125px;  
  width: 48px;  
}  
ul.squared a:hover ul {  
  height: 150px;  
  left: 75px;  
  top: 75px;  
  width: 150px;  
  z-index: 100;  
}  
ul.squared a:hover ul li a b {  
  left: -9999px;  
}  
ul.squared a:hover ul a:hover {  
  height: 48px;  
  opacity: 1;  
  padding: 1px;  
  width: 48px;  
}  
ul.squared a:hover ul a:hover b {  
  display: block;  
  height: 50px;  
  line-height: 50px;  
  position: absolute;  
  text-align: center;  
  width: 50px;  
}  
ul.squared a:hover ul li.p1 a:hover b {  
  left: -50px;  
  top: 50px;  
}  
ul.squared a:hover ul li.p2 a:hover b {  
  left: -50px;  
  top: 0;  
}  
ul.squared a:hover ul li.p3 a:hover b {  
  left: -50px;  
  top: -50px;  
}  
ul.squared a:hover ul li.p4 a:hover b {  
  left: 0;  
  top: -50px;  
}  
ul.squared a:hover ul li.p5 a:hover b {  
  left: 50px;  
  top: -50px;  
}  
ul.squared a:hover ul li.p6 a:hover b {  
  left: 50px;  
  top: 0;  
}  
ul.squared a:hover ul li.p7 a:hover b {  
  left: 50px;  
  top: 50px;  
}  
ul.squared a:hover ul li.p8 a:hover b {  
  left: 0;  
  top: 50px;  
} </style>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *