- → Программирование
- → JavaScript
- → Уроки
Горизонтальное выпадающее меню на jQuery + HTML + CSS
Меню играет неотъемлемую роль в дизайне сайта. Оно позволяет пользователю найти информацию и помогает в навигации. Поэтому, когда вы разрабатываете меню, юзабилити должно быть прежде всего.
Прошлый раз, рассматривалось создание горизонтального выпадающего меню на CSS, но такое меню слишком ограниченное для некоторых сайтов. Что я имею в виду? Если к сайту подключена библиотека jQuery, почему бы не написать 5-6 строк кода, и создать красивые эффекты для выпадающего меню. Сегодня мы узнаем, как сверстать такое меню на HTML + CSS. После чего, мы напишем несколько строк jQuery кода, для плавности выпадения подменю.
Приступим…
Этот урок подразумевает, что вы знаете основы HTML и CSS. Также рекомендовано использовать обнуление CSS стилей, перед использованием этого меню. Я использую HTML5 Doctor, вот сокращенный код:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
Базовая структура горизонтального меню
Начнем создание с базовой HTML структуры меню:
<ul id="coolMenu"> <li><a href="#">Lorem</a></li> <li><a href="#">Mauricii</a></li> <li><a href="#">Periher</a></li> <li><a href="#">Tyrio</a></li> <li><a href="#">Quicumque</a></li> </ul>
Меню состоит из неупорядоченного листа, каждый элемент содержит ссылку с текстом. Не создавайте лишние div блоки, это нам не надо.
Для добавления подменю, просто создайте еще один неупорядоченный лист внутри необходимого li элемента. Как показано на примере:
<ul id="coolMenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li>
<a href="#">Periher</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>
Как вы видите, создание структуры меню очень простое. Вот как оно должно выглядеть в браузере, на этом этапе.
Существует множество способов придать меню горизонтального положения. Из собственной практики должен сказать, это наиболее чистый и быстрый способ реализовать это:
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
- Я решил придать обтекание для всего меню, по левому краю. Вы можете изменить это, придать фиксированную ширину, выровнять по средине или еще что-то.
- Очень важно оставить обтекание слева li элементов. Это придает делает меню горизонтальным.
- Ссылки должны отображаться как block элементы, в ином случае, по ссылкам будет тяжело попасть мышкой.
- Добавляем абсолютное позиционирование и скрываем субменю. Также устанавливаем атрибут z-index, чтобы сделать подразделы поверх остальных элементов.
- Устанавливаем высоту ссылок в меню, а также line-height относительно высоте, чтобы выровнять текст вертикально.
- Следует заметить, что не нужно присваивать фиксированную ширину для элементов. Такова практика позволяет лучше стилизовать меню.
- Также заметьте, что указание hover присваивается для li элемента, а не для ссылки.
На этом базовая структура горизонтального меню создана. Попробуйте открыть его в браузере и наведите на третий элемент, чтобы увидеть меню в работе.
Добавляем юзабилити к меню
На этом этапе, мы добавим некоторые CSS стили, чтобы сделать меню более удобным и практичным.
/* Main menu
------------------------------------------*/
#coolMenu {
font-family: Arial;
font-size: 12px;
background: #2f8be8;
}
#coolMenu > li > a {
color: #fff;
font-weight: bold;
}
#coolMenu > li:hover > a {
background: #f09d28;
color: #000;
}
/* Submenu
------------------------------------------*/
#coolMenu ul {
background: #f09d28;
}
#coolMenu ul li a {
color: #000;
}
#coolMenu ul li:hover a {
background: #ffc97c;
}
Следует понимать, это примерные стили, вы должны создать свои, соответственно дизайну вашего сайта. Вот как меню выглядит на этом этапе:
Добавляем jQuery анимацию к меню
Конечно же, этот последний шаг не обязателен. Меню полноценно и готово к использованию. Но если уже подключена jQuery библиотека, почему бы не сделать горизонтальное меню более красивым. Ну и конечно же, если jQuery еще не подключен, вот как его подключить:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
Теперь давайте добавим класс «noJS» к субменю, чтобы предотвратить действие hover указания в CSS.
<li>
<a href="#">Periher</a>
<ul class="noJS">
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
Также придется создать класс для субменю:
#coolMenu li:hover ul.noJS {
display: block;
}
Вот эти магические 5 строк jQuery кода, которые реализуют анимацию.
$(function(){
$('#coolMenu').find('> li').hover(function(){
$(this).find('ul')
.removeClass('noJS')
.stop(true, true).slideToggle('fast');
});
});
Этот код великолепен для понимания. Скрипт находит непосредственных потомков списка и добавляет hover функцию. Внутри которой, мы убираем стиль «noJS», после чего мы разворачиваем подменю и сворачиваем, когда мышка убрана. Анимация реализована с помощью функции slideToggle. Функция stop, предотвращает анимацию от самоповторения, когда мы наводим несколько раз в короткий промежуток времени.
Примечания
Это горизонтальное меню на jQuery должно работать в IE7+ и других популярных браузерах. Я не парился над работоспособностью в IE6. Эту проблему можно решить в несколько строк кода, но это уже другая тема.
Очень интересно, пригодилась ли кому моя методика…
Задавайте вопросы в комментариях и оставляйте ссылки на результаты вашей работы, буду рад иметь общение с вами.
Источник материала ...
Дальше: Скрипт прогноза погоды для сайта на jQuery + Yahoo API
Development — Taras Moroz