Классня навигация пузырьками

В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. Идея заключается в том, чтобы сделать несколько круглых иконок, на которых при наведении курсора мыши «раскрывается» круглое подменю с дополнительными пунктами.

Мы будем использовать плагин jQuery Easing для получения замечательного эффекта сглаживания.

Разметка

Код HTML состоит из основного элемента div с классом navigation и id nav. В основном элементе div располагаются элементы навигации:

User

• Profile

 

• Properties

 

 

• Privacy

 

 

 

Home

• Portfolio

 

• Services

 

 

• Contact

 

 

…

В примере кода показаны только два пункта навигации. Внутренний элемент div имеет два класса: item и класс с именем, соответствующим пункту меню, например “user” или “home”. Так мы можем адресовать все внутренние элементы соответственно. В данном случае мы будем адресовать элемент ссылки с классом “icon”, чтобы вставить соответствующую иконку (смотри раздел, посвященный CSS).

Остальные элементы внутри пункта навигации — это изображение для пузыря, иконка, заголовок и список ссылок.

CSS

Рассмотрим стили для страницы. Сначала определим общие стили:
.navigation{
margin: 0px auto;
font-family: "Trebuchet MS", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: 1.4px;
}

Теперь мы будем использовать абсолютное позиционирование для элемента:
.navigation .item{
position:absolute;
}

Поскольку мы дали div два класса, мы теперь определим соответствующие позиции для каждого элемента навигации. При применении двух классов мы добавляем оба набора свойств к элементу.
.user{
top:125px;
left:110px;
}
.home{
top:50px;
left:360px;
}
.shop{
top:90px;
left:625px;
}
.camera{
top:230px;
left:835px;
}
.fav{
top:420px;
left:950px;
}

Ссылки на иконки будут иметь общий стиль:
a.icon{
width:52px;
height:52px;
position:absolute;
top:0px;
left:0px;
cursor:pointer;
}

И мы теперь мы можем определить иконку для соответствующего элемента меню:
.user a.icon{
background:transparent url(../images/user.png) no-repeat 0px 0px;
}
.home a.icon{
background:transparent url(../images/home.png) no-repeat 0px 0px;
}
.shop a.icon{
background:transparent url(../images/shop.png) no-repeat 0px 0px;
}
.camera a.icon{
background:transparent url(../images/camera.png) no-repeat 0px 0px;
}
.fav a.icon{
background:transparent url(../images/fav.png) no-repeat 0px 0px;
}

Так как мы используем спрайты, мы легко можем определить класс «hover» следующим образом:
.navigation .item a.active{
background-position:0px -52px;
}

Изображения пузыря будем иметь такой стиль:
.item img.circle{
position:absolute;
top:0px;
left:0px;
width:52px;
height:52px;
opacity:0.1;
}

Элементы навигации, такие как меню и подменю будут записаны в css так:
.item h2{
position:absolute;
width:147px;
height:52px;
color:#222;
font-size:18px;
top:0px;
left:52px;
text-indent:10px;
line-height:52px;
text-shadow:1px 1px 1px #fff;
text-transform:uppercase;
}
.item h2.active{
color:#fff;
text-shadow:1px 0px 1px #555;
}
.item ul{
list-style:none;
position:absolute;
top:60px;
left:25px;
display:none;
}
.item ul li a{
font-size:15px;
text-decoration:none;
letter-spacing:1.5px;
text-transform:uppercase;
color:#222;
padding:3px;
float:left;
clear:both;
width:100px;
text-shadow:1px 1px 1px #fff;
}
.item ul li a:hover{
background-color:#fff;
color:#444;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:1px 1px 4px #666;
-webkit-box-shadow:1px 1px 4px #666;
box-shadow:1px 1px 4px #666;
}

Хорошо, давайте теперь добавим немного JavaScript.

JavaScript

Код JavaScript довольно простой. Сначала добавляем к коду HTML перед закрывающим тегом body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>

Идея заключается в том, чтобы выводить изображение пузыря тогда, когда курсор мыши проходит над пунктом навигации. При этом будет использоваться анимация изменений ширины, высоты и координат сверху и слева. Так как мы хотим, чтобы пузырь появлялся немного выше иконки, то его изображение надо позиционировать существенно выше и левее. Мы “тянем” его вверх и влево с помощью отрицательных значений координат. Также изображение будет постепенно проявляться за счет изменения прозрачности до 1 (строки 6-11). Параметр “easeOutBack” используется плагином jQuery Easing, который создает чудный сглаживающий эффект (строка 12).

Когда анимация закончена мы выводим список ссылок (строка 13).

Также первый пункт списка ссылок и заголовок получают класс “active”, что изменяет их внешний вид (строка 16).

<script type="text/javascript">
    $(function() {
        $('#nav > div').hover(
        function () {
            var $this = $(this);
            $this.find('img').stop().animate({
                'width'     :'199px',
                'height'    :'199px',
                'top'       :'-25px',
                'left'      :'-25px',
                'opacity'   :'1.0'
            },500,'easeOutBack',function(){
                $(this).parent().find('ul').fadeIn(700);
            });
 
            $this.find('a:first,h2').addClass('active');
        },
        function () {
            var $this = $(this);
            $this.find('ul').fadeOut(500);
            $this.find('img').stop().animate({
                'width'     :'52px',
                'height'    :'52px',
                'top'       :'0px',
                'left'      :'0px',
                'opacity'   :'0.1'
            },5000,'easeOutBack');
 
            $this.find('a:first,h2').removeClass('active');
        }
    );
    });
</script>

Когда курсор мыши покидает элемент навигации, мы производим обратные действия и убираем список ссылок и пузырь. Также мы удаляем класс «active» с элемента иконки и заголовка.

И да — в IE все будет работать коряво. Скорее всего, причина в том, что используется CSS3 и прозрачность изображений в купе с анимациями.

Надеюсь, вам понравилось и вы нашли для себя что-то полезное!

Источник урока:

tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery