Создаем простейшее выпадающее меню на JQuery

Опубликовано Декабрь 26th, 2009 SB

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

1. HTML

Практически все меню строятся на использовании списков <ul> с <li>.

<ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03</a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>  

<div class="clear"></div>

2. CSS

CSS код меню также не отличается особой сложностью. У нас имеется два стиля для тега <ul> – родительское меню и подменю. Для родительского устанавливаем значение float: left, чтобы располагать элементы на одной строке. Элементы подменю скрываем по умолчанию и будем показывать их лишь только при наведении курсора.

body {font-family:arial; font-size:11px;}
.clear {clear:both}
/* удаляем стили списка по умолчанию */
#nav {
    margin:0;
    padding:0;
    list-style:none;
}     

    /* make the LI display inline */
    /* делаем отображение LI как inline */
    /* позиционирование относительно родителя */
    #nav li {
        float:left;
        display:block;
        width:100px;
        background:#ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
    }  

    /* главное меню */
    #nav li a {
        display:block;
        padding:8px 5px 0 5px;
        font-weight:700;
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
    }  

    #nav li a:hover {
        color:#fff;
    }  

    /* можно сделать другой стиль для выделенного меню */
    #nav a.selected {
        color:#f00;
    }  

        /* подменю, скрыто по умолчанию */
        #nav ul {
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            list-style:none;
        }  

        #nav ul li {
            width:100px;
            float:left;
            border-top:1px solid #fff;
        }  

        /* display block will make the link fill the whole area of LI */
        /* отображение ссылки в меню как block, чтобы заполнить пространство в LI */
        #nav ul a {
            display:block;
            height:15px;
            padding: 8px 5px;
            color:#666;
        }  

        #nav ul a:hover {
            text-decoration:underline;
        }  

/* ну и классика жанра: IE6 fix */
*html #nav ul {
    margin:0 0 0 -2px;
}

3. Javascript

$(document).ready(function () {   

    $('#nav li').hover(
        function () {
            //показать подменю 
            $('ul', this).slideDown(100);  

        },
        function () {
            //скрыть подменю 
            $('ul', this).slideUp(100);
        }
    );  

});

Для отображения и скрытия элементов используются функции slideUp И slideDown, который можно заменить на другие функции, что подробно описано в документации по JQuery.

Теги: menu, coding, Javascript