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

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


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

Никаких новых идей данное меню в себе не несет, но я постарался сделать его очень простым в плане кода и понимания. 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 (стрелка вниз).

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

Всем спасибо за внимание. Ждите новых работ, а пока что можете высказывать свое мнение и критику = )
27996
1
Мы всегда на связи:
Телеграмм
ICQ
Gmail
Yandex
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Телеграмм
ICQ
Gmail
Yandex