Простое вертикальное раздвижное меню на jQuery

04 января 2013  8059  верстка, jQuery, html, скрипты

 

Небольшой скрипт позволяет сделать навигацию по вертикальному меню удобной, а само меню — компактным и лаконичным.

Подключаем функции скрипта.

$(document).ready(function(){
    $('#spisok > li > ul')
        .hide()
        .click(function(e){
        e.stopPropagation();
});
$('#spisok > li').toggle(function(){
    $(this).find('ul').slideDown();
    }, function(){
        $(this).find('ul').slideUp();
    });
});

Подключаем стили для списков.

#spisok, #spisok ul
{
    list-style-type: none;
    margin: 0;
    padding: 5px 0;
}
#spisok li
{
    padding: 5px 0;
}
#spisok li li
{
    padding: 5px 0 5px 14px;
}
#spisok li li:before
{
    content: '- ';
}

Разметка списка.

<ul id="spisok">
<li><a href="#">Первый пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
            <li><a href="#">третий подпункт</a></li>
            <li><a href="#">четвертый пункт</a></li>
        </ul>
</li>
<li><a href="#">Второй пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
        </ul>
</li>
<li><a href="#">Третий пункт списка</a>
        <ul>
            <li><a href="#">первый подпункт</a></li>
            <li><a href="#">второй подпункт</a></li>
            <li><a href="#">третий подпункт</a></li>
        </ul>
</li>
</ul>

Редактировать код раздвижного вертикального меню онлайн.

     

 

Комментарии для сайта Cackle
наверх