В этом руководстве шаг за шагом объясняется, как использовать JQuery и CSS для создания классного динамического меню. Функция jQuery «пиши меньше, делай больше» хорошо известна. Даже люди без обширного опыта программирования JS могут быстро научиться использовать ее с помощью API, который она предоставляет. Конечно, если у вас есть опыт, я все равно рекомендую это сделать. вы можете понять принципы реализации каждой основной функции jQuery. Не будем говорить о других вещах, давайте просто посмотрим, как с ее помощью добиться волшебного эффекта меню.
.jpg)
Вы можете нажать , чтобы просмотреть демо-версию или загрузить исходный код .
Шаг 1 — HTML-структура
Взгляните на HTML-код меню. Он ничем не отличается от обычного кода меню:
<div id="меню" класс="меню">
<ул>
<li><a href="javascript:;">Главная</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Ресурсы</a></li>
<li><a href="javascript:;">Руководства</a></li>
<li><a href="javascript:;">О программе</a></li>
</ul>
</div>
Ключевым моментом является использование сценариев для создания нескольких отдельных слоев в каждой опорной точке (элементе), чтобы ими можно было управлять для отдельной анимации при наведении курсора мыши. Для этого нам нужно изменить структуру DOM при загрузке DOM, чтобы каждый код привязки выглядел следующим образом:
<a href="javascript:;">
<span class="out">Главная</span>
<span class="bg"></span>
<span class="over">Главная</span>
</а>
Содержимое каждой исходной точки привязки будет добавлено к двум элементам диапазона (.out и .over), а другой элемент диапазона (.bg) — это слой фонового изображения.
Что касается изменения структуры DOM, код JS будет объяснен на шаге 3.
Шаг 2. Стиль CSS
В примере показаны два стиля: один с фоновым изображением и один без фонового изображения (подробности см. в демо-версии). Вы также можете свободно настроить свой собственный стиль для создания более крутого меню. Вот основные стили и пояснения. :
/* Ниже приведен основной стиль меню.
*/.menuulli{
плавать: влево;
/* Содержимое подэлемента меню скрыто от видимости */
переполнение: скрыто;
/* Некоторые коды ниже опущены*/
}
.меню ул ли а {
/* Должно быть относительное позиционирование */
положение: относительное;
дисплей: блок;
ширина: 110 пикселей;
/* Некоторые коды ниже опущены*/
}
.menu ul li a span {
/* Все слои будут использовать абсолютное позиционирование */
позиция: абсолютная;
слева: 0;
ширина: 110 пикселей;
}
.menu ul li a span.out {
верх: 0 пикселей;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Изначально слои .over и .bg имеют размер -45 пикселей относительно элемента a для достижения скрытого эффекта*/
верх: -45 пикселей;}/
*Ниже приведен пример использования фонового изображения*/
#меню {
/*Фон меню*/
фон:url(bg_menu.gif) прокрутка 0 -1px повтор-x;
граница: сплошной 1 пиксель #CCC;}
#меню уль ли а {
цвет: #000;
}
#menu ul li a span.over {
цвет: #FFF;
}
#menu ul li span.bg {
/* Указываем высоту и фоновое изображение*/
высота: 45 пикселей;
фон: url(bg_over.gif) центр центр без повтора;
}
Вы также можете настроить стиль CSS самостоятельно, здесь также представлена упрощенная версия стиля ( посмотреть демо )