Многоуровневое выпадающее меню - горизонтальное и вертикальное

Многоуровневое выпадающее меню - горизонтальное и вертикальное


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

Никаких новых идей данное меню в себе не несет, но я постарался сделать его очень простым в плане кода и понимания. HTML и CSS код я приводить не буду - вы без труда сможете сами в них разобраться, так как там простые элементарные списки. Приведу лишь код jQuery, который нам понадобиться, чтобы меню заработало:


$(document).ready(function() {
    
    // Вертикальное меню
    $(".tt-menu li").hover(
        function() {
            $(this).find("ul:first").fadeIn(200);
            $(this).addClass("active");
        }, function() {
            $(this).find("ul:first").fadeOut(0);
            $(this).removeClass("active");
    });
    
    $(".tt-menu li:has(ul)").addClass("level-item");
    
    // Горизонтальное меню
    $(".tt-menu-horizontal li").hover(
        function() {
            $(this).find("ul:first").fadeIn(200);
            $(this).addClass("active");
        }, function() {
            $(this).find("ul:first").fadeOut(0);
            $(this).removeClass("active");
    });
    
    $(".tt-menu-horizontal li:has(.tt-menu-horizontal-right)").addClass("level-item2");
    $(".tt-menu-horizontal-right li:has(ul)").addClass("level-item");
    
});


При наведении мышки на любой пункт списка (тег li) мы ищем в нем первый элемент ul (подменю) и если данный элемент присутствует, то показываем его. Для удобства мы к тем спискам, которые содержат подменю, добавляем типичные стрелочки, которые как бы намекают, что тут есть чему выпасть = ) За эти стрелочки отвечают классы level-item (стрелка вправо) и level-item2 (стрелка вниз).

А вот и наше рабочее многоуровневое выпадающее меню в действии

Всем спасибо за внимание. Ждите новых работ, а пока что можете высказывать свое мнение и критику = )
Getmanoff написал 6 февраля 2012 16:12
/ /
Как его установить в DLE ?
Похожие новости:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Все шаблоны совместимы с актуальной версией движка
Последние новости:

Поздравлю всех с Новым 2017 годом!

31-12-2016, 00:24
Поздравлю всех с Новым 2017 Годом! Пусть все Ваши желания обязательно сбудутся и в новом году будет только хорошее настроение! Ну и какой же новый год без подарков?) Представляю БЕСПЛАТНЫЙ шаблон для DLE 11.2 - FanBox (Test-Templates)! Качайте и используйте шаблон на своих сайтах в свое

11.11 Всемирный день распродажи! Успей купить любой шаблон со скидкой 50%! Только сегодня!

11-11-2016, 17:32
Только сегодня! Честная скидка 50% на любой шаблон! Успей затариться на распродаже =) За получением скидки пишите в icq или на почту!
Все новости
Test-Templates Google+

Test-Templates Youtube

Дружественные ресурсы:
Опрос
Купили бы вы версии наших шаблонов под WP?
Да, конечно
Нет, это не нужно
Не готов работать с WP