главная

Теги:


Пузырьковая навигация для сайта

В данном уроке мы создадим пузырьковую навигацию с помощью 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: 16px;
    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:430px;
   left:970px;
}

Элемент ссылки для иконки будет иметь следующий стиль:

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;
}

Так как мы используем спрайты для иконок, то для активного состояния иконки можно просто задать класс:

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

Элементы пункта навигации, такие как заголовок и список ссылок, имеют следующие стили:

.item img.circle{
    position:absolute;
    top:0px;
    left:0px;
    width:52px;
    height:52px;
    opacity:0.1;
}

Для ссылок используются белые тени, которые придают эффект объема надписям.

JavaScript

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



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

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

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


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

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

Готово!

Источник урока: tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/

Урок Создан:2011-02-09 Просмотров:2107

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


Copyright© 2009 Hosted by Zhost