Простое многоуровневое меню, используя 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.
Пример
Нахуя z-index:1000 писать? А потом разные олени и сайты создают с z-index: 99999999. У вас 1000 слоев перед меню?
