www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание меню для сайта

Создание простого анимированного меню

В предыдущей статье было рассказано о создании горизонтального выпадающего меню с помощью средств HTML и CSS. Значительно улучшить его представление можно, добавив простейшие эффекты анимациии. Например, замедлить разворачивание и скрытие списка, как показано на рисунке (пункт Наши услуги).

  ГЛАВНАЯ ЦЕНЫ АКЦИИ ФОТООБЗОР КОНТАКТЫ  

Для добавления этого эффекта использованы скрипты бесплатной библиотеки jQuery.

Сначала несколько слов об этом замечательном инструменте, облегчающем жизнь веб-дизайнеров. Основоположником jQuery является американский программист Джон Резиг. Он опубликовал свой первый вариант jQuery в Нью-Йорке в 2006 году. Сейчас Джон Резиг является руководителем большой группы разработчиков, занимающейся развитием и пополнением этой библиотеки скриптов.

Основная идея jQuery - отделить выполнение действий на сайте от HTML кода. Для простоты можно сравнить эти действия с правилами CSS, которые отделяют визуализацию, то есть верстку страницы, от HTML кода. Аналогично, скрипты jQuery отделяют выполнение сценариев от структуры HTML. Например, вместо прямого указания на действие при клике мышью по элементу страницы сайта, управление передаётся определенному скрипту JQuery, который и выполняет требуемые операции.

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

Продолжая аналогию с CSS, вспомним, что для того, чтобы к правилам CSS можно было обращаться с разных страниц сайта, их обычно выделяют в отдельный файл. Также поступают и со скриптами jQuery - их размещают отдельно от HTML страницы, как один или несколько внешних js-файлов, и вызывают по мере необходимости. Размещают указатели на скрипты аналогично указателям на css-файлы внутри тега <head>...</head>:

<head>...
<script type="text/javascript" src="путь к скриптам jQuery.js"></script>
</head>

Обычно все скрипты и необходимые для них файлы (изображения, таблицы CSS и др.) помещают для удобства в отдельную папку. Сами скрипты jQuery можно не размещать на своем сайте, а обращаться непосредственно к библиотекам jQuery или Googleapis. В этом случае вы экономите место на своём хостинге.

Итак, возвращаясь к нашему примеру, разместим внутри тега <head>...</head> следующий фрагмент из двух скриптов:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.dropmenu').find('ul li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('slow');
});
});
</script>

Первый скрипт даёт ссылку на загрузку jQuery v1.6.1, а второй определяет параметры конкретного узла на странице нашего сайта, то есть выпадающего меню. Параметры меню можно изменять в следующих строчках:
- $('.dropmenu').find('ul li').hover(function(){ - определяет класс (dropmenu), который необходимо назначить для пункта с выпадающим списком, а ul li - его конкретный элемент;
- .stop(true, true).slideToggle('slow'); - задается скорость выпадения списка. Можно задать fast - быстро или slow - медленно.

Чтобы скрипт заработал, необходимо заменить строчку в таблице стилей (см. предыдущую статью):
.dropmenu li:hover ul {display: block;}
на новую
.dropmenu li:hover ul.noJS {display: block;}

Кроме того, надо указать class="noJS" для пункта меню с выпадающим списком (это необходимо, чтобы выпадающее меню корректно работало во всех браузерах):
<td class="dropmenu"><ul >
<li>
<label>НАШИ УСЛУГИ &#9660;</label>
<ul class="noJS">
<li ><a href="" >Финская сауна</a></li>
<li ><a href="" >Турецкий Хамам</a></li>
<li ><a href="" >Русская баня</a></li>
<li><a href="" >Девочки</a></li>
<li><a href="" >Мальчики</a></li>
<li><a href="" >Массаж</a></li>
</ul>
</li>
</ul></td>

Важное замечание: необходимо помнить, что загрузка скриптов замедляет открытие страницы. При медленном соединении с интернетом это приводит к тому, что выполнение сценариев происходит не сразу, и пользователь некоторое время (до полной загрузки скрипта) не увидит замедления выпадения списка.

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

Если по каким-то причинам вы не хотите обращаться за скриптами jQuery к библиотеке Googleapis, то можете загрузить их на свой хостинг. Для этого скачиваете архив и распаковываете его в новую папку на вашем сайте, назвав её, например, dropmenu. В ней получится один файл jquery-1.9.1.min.js (для разнообразия я использовал более свежую версию jQuery), путь к которому и указываете в теге <head>...</head> вместо старого:
<script type="text/javascript" src="dropmenu/jquery-1.9.1.min.js"></script>.

21.04.2013 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: выпадающее меню на HTML и CSS, горизонтальное меню с выпадающим списком, раскрывающееся меню, анимированное меню, jQuery меню