Выпадающее меню на jQuery
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:
<!DOCTYPE HTML>
<html>
<head>
<link media="screen" href="styles.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myscript.js"></script>
<title>Навигация</title>
</head>
<body>
<h1>Navigation</h1>
<ul id="menu">
<li class="menu"><a href="#">Sub 1<span></span></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</li>
<li class="menu"><a href="#">Sub 2<span></span></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</li>
<li class="menu"><a href="#">Sub 3<span></span></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</li>
<li class="menu"><a href="#">Sub 4<span></span></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</li>
<li class="menu"><a href="#">Sub 5<span></span></a>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег <li class="menu"><a href="#">Sub 1<span></span></a>…</li> раскрываться будет все, что в него заключено, а именно:
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:
body {
background: rgb(244, 244, 244);font-family: Verdana;font-weight: 100;
}
/*---Навигация---*/
#menu {
width: 200px;
margin: 0;
padding: 2px;
}
#menu li {
list-style-type: none;
}
.menu {
position: relative;
background: chocolate;
background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
border: 1px solid #2AC4B3;
}
.menu:hover {
background: #00c;
background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
}
.menu span {
width: 11px;
height: 11px;
display: block;
position: absolute;
top: 8px;
right: 10px;
cursor: pointer;
}
.menu ul {
width: 150px;
margin: 0;
padding: 1px;
position: absolute;
top: -1px;
left: 198px;
}
.menu ul li {
background: chocolate;
background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
border: 1px solid #fff;
}
.menu ul li:hover {
background: #00c;
background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
}
.menu a {
padding: 5px;
display: block;
text-decoration: none;
color: white;
}
.menu a:hover {
color: white;
}
/*---END---*/
Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:
$(document).ready(function(){
$('.menu ul').hide();
$('.menu span').css('background', 'url("down.png")');
$('#menu li').hover(function(){
$(this).children("ul").show(); /*Эквивалент $('ul', this).show();*/
$(this).find("span").css('background', 'url("right.png")'); /*Эквивалент $('span', this).css('background', 'url("right.png")');*/
},function(){
$(this).children("ul").hide(); /*Эквивалент $('ul', this).hide();*/
$(this).find("span").css('background', 'url("down.png")'); /*$('span', this).css('background', 'url("down.png")');*/
}
)
})
Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:
$(document).ready(function(){
})
В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.
Далее идет:
$('.menu ul').hide();
Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.
Далее идет следующая конструкция:
$('.menu span').css('background', 'url("down.png")');
Что она делает? Она ищет тег <span></span> родительскому элементу которого присвоен класс «menu» и, при помощи метода "css('background', 'url("down.png")')”, происходит присваивание свойству стиля «background» значения «url("down.png")». "down.png" – это иконка, показывающая, что список может раскрываться.
Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:
$('#menu li').hover(function(){
$(this).children("ul").show();
$(this).find("span").css('background', 'url("right.png")');
},function(){
$(this).children("ul").hide();
$(this).find("span").css('background', 'url("down.png")');
}
Мы ищем тег <li></li> родительскому элементу которого присвоен id="menu”. Далее идет метод "hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.
В первой функции прописано:
$(this).children("ul").show();
$(this).find("span").css('background', 'url("right.png")');
Конструкция "$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег <li class="menu"><a href="#">Sub 1<span></span></a>….</li>. Далее у тега <li></li> при помощи метода «children("ul")» мы ищем вложенный тег <ul></ul> и методом «show()» отображаем его.
После этого у тега <li></li> мы ищем потомков, а именно: тег <span></span> и у него меняем фон на другую иконку.
После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:
function(){
$(this).children("ul").hide();
$(this).find(«span»).css('background', 'url("down.png")');
}
Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега <head> строку <script type="text/javascript" src="js/jquery.js"></script>.
Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function(){})». Выглядеть это будет следующим образом:
$(document).ready(function(){
})
$('.menu ul').hide();
$('.menu span').css('background', 'url("down.png")');
$('#menu li').hover(function(){
$(this).children("ul").show();
$(this).find(«span»).css('background', 'url("right.png")');
},function(){
$(this).children("ul").hide();
$(this).find(«span»).css('background', 'url("down.png")');
}
)
Подключение нашего скрипта <script type="text/javascript" src="js/myscript.js"></script> необходимо перенести из тега <head></head> в самый конец, перед закрывающим тегом </body>, либо можно подключить скрипт сразу после маркированного списка.
