Многоуровневое выпадающее меню JQuery, CSS

Многоуровневое выпадающее меню JQuery, CSS

многоуровневое выпадающее меню
Бывают случаи, когда клиента не нужно «поражать чрезвычайной анимацией». Ему вполне подойдет простое меню. А что это значит для веб-разработчика? В моем понимании это:

  • минимальное количество кода;
  • простота в интеграции данного решения в уже существующий код (если на сайте подключен фреймворк jQuery, то целесообразно использовать все его преимущества);
  • неприхотливая анимация (то есть анимация есть, она заметна, но не более).

Однажды я наткнулся на простенькое многоуровневое выпадающее меню (их еще величают «dropdown menu»). Нет особой нужды весь текст статьи-источника переносить сюда. Коротко остановлюсь на сути.

Первая часть статьи посвящена задаче построения рабочего меню, которое бы работало только с применением CSS (т.н. suckerfish menu), а уже во второй части с помощью нескольких строк jQuery, автор «оживляет» свое творение.

Немного мыслей вслух. Было бы неплохо, если бы вы правильно расставляли акценты. Это далеко не самое экономное решение, ведь бывалый веб-разработчик знает, что dropdown-меню можно сделать и без использования JavaScript (исключительно средствами CSS). Но такое решение лишено плавной анимации — подменю резко появляется и так же резко прячется. Что не очень красиво. Еще как вариант, который следует принять во внимание, можно поискать готовое меню, написанное на «чистом» JavaScript, чтобы не подключать дополнительно фреймворк, который, будем объективными, «весит» немало.

Читайте также  Меню аккордеон на jquery.

«Multilevel Dropdown menu» с сайта kriesi.at, о котором шла речь выше, состоит из 3-х файлов:

  • jquery.js — фреймворк jQuery;
  • style.css — набор CSS-стилей;
  • menu.js — маленький фрагмент кода, который не в последнюю очередь такой маленький, потому что использует потенциал jQuery.

XHTML-структура меню формируется посредством неупорядоченных списков (<ul>). При необходимости вы можете вкладывать списки в предыдущей и таким образом создавать нужное количество уровней меню. Структура может быть следующей (соответствует тому, что вы видели выше на иллюстрации к статье):

Как вы уже заметили, список наивысшего уровня имеет идентификатор «nav». Далее в нужный элемент этого списка после тега <a> вы вставляете список, который будет играть роль выпадающего. При необходимости этот процесс повторяете «вглубь».

Осталось посмотреть на jQuery-код (файл menu.js), его там совсем мало:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});

Источник — http://www.kriesi.at

Карусель изображений jquery. fade effect... Html разметка Jquery Код //============слайдер баннеровтоп============ $(".bannerstop > div:gt(0)").hide(); setInterval(...
Подсчет постов в категориях меню WordPress... Использование wp_nav_menu очень облегчает создание меню любой сложности с возможностью редактирование их структуры через админ-страницу. Но у таких ...
Меню аккордеон на jquery. Подключаем Jquery 1.7.1 Пишем наше меню на HTML What's new? Weekly specials   Last night's pics! Users' comments &...
Равномерное выравнивание блоков по ширине.... css #elsewhere { background-color: #222; } .zone { padding-left: 1.25rem; padding-right: 1.25rem; margin-left: -1.25rem; margin-right: -1....

Сохрани, чтобы не потерять