Простое многоуровневое меню, используя CSS и jQuery.

Очень часто в наших проектах требуется простое для настройки и стилизации многоуровневое меню. В этой статье я хочу показать один из способов его реализации. HTML, CSS и немного jQuery.

Структура меню

Используется стандартная модель

...а также стандартная HTML-разметка:

<div id="nav"> <!-- nav container --> <ul> <li>item <!-- main item --> <ul> <!-- item submenu --> <li>sub item</li> </ul> </li> <ul> </div>

Как видите, код представлен вложенным несортированным списком. Например, для этой статьи я использовал следующий код (элементы главного меню выделены жирным начертанием):

<div id="nav"> <ul> <li><a href="#"><b>Web Design</b></a> <ul class="submenu"> <li><a href="http://woork.blogspot.com">Woork</a></li> <li><a href="http://www.dzone.com">DZone</a></li> </ul> </li> <li><a href="#"><b>Tech News</b></a> <ul class="submenu"> <li><a href="http://www.mashable.com">Mashable</a></li> <li><a href="http://www.cnet.com">CNET</a></li> </ul> </li> <ul> <div>

Вы можете добавить новые пункты, просто используя html-тег <li> с тегом <ul> внутри него.

Стиль CSS

Теперь напишем стили. Я подготовил очень простой стиль, который вы можете изменять по своему усмотрению. Ниже представлен стиль для основного div-а.

#nav { height :32px; line-height :32px; background :#3B5998; padding :0 10px; } #nav ul, #nav ul li { margin :0; padding :0; list-style :none; } #nav ul li { float :left; display :block; }

Далее напишем стиль для пунктов главного меню (#nav ul li {...}), а также для подменю (#nav ul li ul li{...}):

#nav ul li a:link, #nav ul li a:visited { color :#FFF; font-size :14px; font-weight :bold; text-decoration :none; padding :0 20px 0 6px; display :block; } #nav ul li a:hover { color :#EBEFF7; } #nav ul li ul li { float :none; display :block; } #nav ul li ul li a:link, #nav ul li ul li a:visited { color :#444; font-size :11px; font-weight :bold; text-decoration :none; padding :0 10px; clear :both; border-bottom :solid 1px #DEDEDE; } #nav ul li ul li a:hover { color :#3B5998; background :#EBEFF7; }

Осталось написать стиль для секции подменю:

.submenu { position : absolute; width : 160px; background : #FFF; padding : 10px; border : solid 1px #2E4B88; border-top : none; display : none; line-height : 26px; z-index : 1000; }

jQuery

А теперь воспользуемся библиотекой jQuery, для того чтобы прятать и показывать меню второго уровня. Воспользуемся событиями mouseover и mouseleave. Не забываем в <head> подключить jQuery:

<script type="text/javascript" src="jquery.js"></script>

А затем пишем следующий код:

<script type="text/javascript"> function nav(){ $("div#nav ul li").mouseover(function() { $(this).find("ul:first").show(); }); $("div#nav ul li").mouseleave(function() { $("div#nav ul li ul").hide(); }); $("div#nav ul li ul").mouseleave(function() { $("div#nav ul li ul").hide();; }); }; $(document).ready(function() { nav(); }); </script>

Этот код можно вынести в отдельный файл, и подгружать его. Всё, меню готово.

В одной из следующих статей я напишу как вообще обойтись без jQuery. Мы напишем меню используя только html и css.

Пример
Опубликовано: 10.11.2009 Просмотров 26898 Ссылка на оригинал Tweet it!
6 comments  

Вася

2011.02.21 14:02

 Нахуя z-index:1000 писать? А потом разные олени и сайты создают с z-index: 99999999. У вас 1000 слоев перед меню?
 

basilkot

2011.02.21 14:28

  • Специально для вас:
    .submenu { z-index : 1;}

злой

2011.08.07 10:04

 не пашет ваш кодец, при наведении нихуя не появляется
 

Rammzan

2011.08.30 22:21

 Вася, 1000 слоёв для того чтобы меню в частых случаях оказывалось впереди остального кода, потому что многие когда пишут шаблоны либо используют готовые, в них редко слоёв больше 100. Короче это для удобства новичкам, чтобы у них не появилась лишняя проблема.
 

Сергей

2011.12.07 01:38

 Спасибо огромное! И, кстати, как бы смешно не звучало, давно искал такой синий цвет...
 

Не представился

2012.04.11 19:26

 Отлично !!!
(код предоставляет возможность добавить соль и перец по вкусу)
 

Не представился

2012.06.18 17:30

 В ie 8 дергается с задержкой по времени выводится (
 

Оставить после себя комментарий

user

2016.11.22

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!