В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. Идея заключается в том, чтобы сделать несколько круглых иконок, на которых при наведении курсора мыши «раскрывается» круглое подменю с дополнительными пунктами.
Мы будем использовать плагин jQuery Easing для получения замечательного эффекта сглаживания.
Демо Скачать исходникиРазметка
Код HTML состоит из основного элемента div с классом navigation и id nav. В основном элементе div располагаются элементы навигации:
В примере кода показаны только два пункта навигации. Внутренний элемент 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
Обзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!