Войти Регистрация

Горизонтальное выпадающее меню на jQuery + HTML + CSS


Меню играет неотъемлемую роль в дизайне сайта. Оно позволяет пользователю найти информацию и помогает в навигации. Поэтому, когда вы разрабатываете меню, юзабилити должно быть прежде всего.

Прошлый раз, рассматривалось создание горизонтального выпадающего меню на CSS, но такое меню слишком ограниченное для некоторых сайтов. Что я имею в виду? Если к сайту подключена библиотека jQuery, почему бы не написать 5-6 строк кода, и создать красивые эффекты для выпадающего меню. Сегодня мы узнаем, как сверстать такое меню на HTML + CSS. После чего, мы напишем несколько строк jQuery кода, для плавности выпадения подменю.

Горизонтальное выпадающее меню 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>

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

Базовая HTML структура меню

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

#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 библиотека, почему бы не сделать горизонтальное меню более красивым. Ну и конечно же, если 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. Эту проблему можно решить в несколько строк кода, но это уже другая тема.

Очень интересно, пригодилась ли кому моя методика…

Задавайте вопросы в комментариях и оставляйте ссылки на результаты вашей работы, буду рад иметь общение с вами.


Демо Скачать исходники (0.01 Mb.)


Источник материала ...

Дальше: Скрипт прогноза погоды для сайта на jQuery + Yahoo API


Дискуссия по теме     4 Комментария 
Добавить комментарий
Олег 22.03.2015 в 14:43
Спасибо!!! Ваша реализация проста и эффективна!! Супер! Очень выручили.
Николай 01.03.2015 в 19:28
Спасибо! Ваша статья очень помогла.
Вячеслав 04.12.2012 в 20:42
Спасибо огромное!!! Менюха отличная!!! Простая и очень грамотная!!! Понимание кода на высоте!!!
Евгений 21.10.2012 в 18:16
Спасибо очень пригодилась инструкция)))) А не подскажите как реализовать 3 и 4 уровень горизонтального меню, желательно как то в продолжении этого урока..))) Заранее благодарю..)))
Просмотров: 27724