Многоуровневое выпадающее меню - горизонтальное и вертикальное
Продолжаю наполнять раздел Разработки своими работами. На очереди такой популярный и эффективный способ упорядочить большой список разделов на сайте, как выпадающее многоуровневое меню.
Никаких новых идей данное меню в себе не несет, но я постарался сделать его очень простым в плане кода и понимания. 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 (стрелка вниз).
А вот и наше рабочее многоуровневое выпадающее меню в действии
Всем спасибо за внимание. Ждите новых работ, а пока что можете высказывать свое мнение и критику = )
28886
1
Похожие материалы
Мы всегда на связи:
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.