Создаём горизонтальное выпадающее меню на jQuery

горизонтальное меню jquery

От автора: Выпадающее меню хорошо подходит для скрытия навигационных ссылок, когда они вам не нужны. Оно помогает сделать страницу аккуратной и простой в вопросе навигации. Оно улучшает, кроме того, впечатление пользователя, когда тот пытается определить местонахождение определенной информации внутри веб-сайта. Существует множество способов создания выпадающего меню на jQuery и много разных их видов. Если вы заметили, вертикальное выпадающее меню чаще используется в сравнении с горизонтальным.

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


горизонтальное меню jquery

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

1. Фоновое изображение для навигации

Мы начнем с кадрирования фонового изображения, выберем всю высоту фона навигации, а на ширину нам отлично хватит 5 пикселей, чтобы сделать CSS repeat-x.

горизонтальное меню jquery

2. Правое пунктирное обрамление

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

горизонтальное меню jquery

3. Создаем разметку HTML

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

<ul id="ddmenu">
    <li><a href="#">Services</a>
        <ul>
            <li><a href="#">Panel Beating</a></li>
            <li><a href="#">Insurance Claim</a></li>
            <li><a href="#">Spray Painting</a></li>
            <li><a href="#">Engine Servicing</a></li>
            <li><a href="#">Car Inspection</a></li>
        </ul>
 
    </li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="#">Work Place</a></li>
            <li><a href="#">Our Cars</a></li>
            <li><a href="#">Our Staff</a></li>
            <li><a href="#">Special Events</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a>
        <ul>
            <li><a href="#">Enquiry</a></li>
            <li><a href="#">Feedback</a></li>
        </ul>
    </li>
    <li><a href="#">Home</a></li>
</ul>

Как видно, под каждым родительским тэгом li содержится список подтэгов li, которые станут списком выпадающих ссылок.

4. Выпадающее меню jQuery

Теперь разметка HTML готова и мы перейдем к jQuery. Для этого учебника я использую плагин jQuery Simple Drop Down Menu Plugin из массива JavaScript.

// <![CDATA[
    var timeout    = 500;
    var closetimer = 0;
    var ddmenuitem = 0;
 
    function ddmenu_open(){
        ddmenu_canceltimer();
           ddmenu_close();
           ddmenuitem = $(this).find('ul').css('visibility', 'visible');
    }
 
    function ddmenu_close(){
        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');
    }
 
    function ddmenu_timer(){
        closetimer = window.setTimeout(ddmenu_close, timeout);
    }
 
    function ddmenu_canceltimer(){
        if(closetimer){
            window.clearTimeout(closetimer);
                closetimer = null;
    }}
 
    $(document).ready(function(){
        $('#ddmenu > li').bind('mouseover', ddmenu_open)
        $('#ddmenu > li').bind('mouseout',  ddmenu_timer)
    });
 
    document.onclick = ddmenu_close;
// ]]>

5. CSS для горизонтального выпадающего меню

Наконец мы добрались до CSS своего меню. В массиве JavaScript плагин демонстрирует вертикальное выпадающее меню, а нам придется модифицировать CSS для того, чтобы сделать горизонтальное выпадающее меню.

/*Drop Down Menu Styles*/
#ddmenu {
    background:url(images/menubg.gif) repeat-x;
    margin: 0;
    padding: 0;
    height:43px;
    width:700px;
}
 
#ddmenu li {
    float: left;
    list-style: none;
    font: 11px Tahoma, Arial;
}
 
#ddmenu li a {
    background:url(images/top-dotted.gif) right no-repeat;
    display: block;
    padding: 5px 12px;
    text-decoration: none;
    width: 70px;
    color: #fff;
    text-transform:uppercase;
    white-space: nowrap;
    text-align:center;
}
 
#ddmenu li a:hover {
    background: #000 url(images/top-dotted.gif) right no-repeat;
}
 
#ddmenu li ul {
    margin: 3px 0 0 10px;
    padding: 0;
    position: absolute;
    visibility: hidden;
    width:600px;
}
 
#ddmenu li ul li {
    display:inline;
}
 
#ddmenu li ul li a {
    width: auto;
    background: url(images/bottom-dotted.gif) right no-repeat;
    display: inline;
    color: #d9d9d9;
    font-size: 10px;
    padding: 2px 10px;
}
 
#ddmenu li ul li a:hover {
    background: #000 url(images/bottom-dotted.gif) right no-repeat;
    padding: 2px 10px;
}

В конце концов, из CSS массива JavaScript вы всего-навсего убрали float:none; из #ddmenu li ul li, так что будет применено свободное перемещение float, и добавили display: inline; в #ddmenu li ul li a, чтобы каждый li был встроен.

Важный момент, который следует взять на заметку: для того, чтобы это горизонтальное выпадающее меню на jQuery работало правильно в Internet Explorer 6 (IE 6), вам придется установить фиксированную ширину для #ddmenu li ul, чтобы неупорядоченный список был достаточной ширины для поддержки горизонтального выпадающего списка в IE 6.

киберсант-вебмастер

Автор: Terrance

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (14)

  1. Эдуард

    Иногда использование горизонтального меню, единственно возможный вариант.
    А сделать его лёгким, красивым и функциональным одновременно не так-то просто.
    Мне кажется автору это удалось!
    Подумываю об изменении меню на своём сайте.
    Спасибо за урок!

  2. Александр

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

  3. игорь гольдберг

    Красивое меню. Мне очень понравилось. Работает легко и быстро.

  4. Роза

    Нельзя ли разобрать по подробнее. Для меня многое незнакомо.

  5. Сергей

    Хотел давно такое сделать, просто выпадающее получалось, а такое нет :) так что спасибо :)

    ЗЫ, По моему урок не очень правельно написан! Сначала лечшеб ксс рассмотрел и с пояснениями? Ведь не все понимают в этом, я б наверно не чему и не научился без пояснений(в начале обучения дает талчок, типа «о я все понял, это прото», а не «блин, апять это » float:none;» где его искать, о нет!!!») Потом резметку, ну и jQuery.

  6. Наталия

    Какой Вы молодец!
    Огромнейшее Вам спасибо за такую красотищу!
    Будем пробовать.

  7. Name

    Не понял зачем тут вообще jquery. Это все делается на css.

    • Webchester

      Согласен зачем здесь jquery, если можно внутренние списки то есть под меню скрыть свойством display: none; а когда наводится курсор на меню, надаем li:hover display: block;
      Зачем этот лишний js код??

  8. Александр

    Будем пробовать.

  9. Елена

    Спасибо, попробую сделать.

  10. Айбек

    Попробую, думаю очень красиво получится

  11. Юрий

    Спасибо! Попробую.

  12. Hovhannes

    Спасибо. Будем пробовать.

  13. Stas

    Ну ниче так прикольно, может пригодиться возьму на заметки, может на свой сайт приспособлю, или тот урок с БМВ больше подойдет для моего сайта. Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree