Мне нужна помощь. Я везде искал, но я думаю, что то, что я ищу, немного уникально.горизонтальное меню jQuery с подсетонами
Я пытаюсь создать меню, которое, когда вы нажимаете на опцию меню, представляет собой группу опций. Я думаю, этот бит у меня получился. то, что я пытаюсь достичь сейчас, это заставить его позволить детям подменю скользить между линиями ссылок напрямую. вроде как меню горизонтального аккордеона, с завихрением наличия всех ссылок верхнего меню в строке, а не вертикально.
действие, нажмите на элемент topmenu и появятся подменю. если нажата ссылка подменю, эта ссылка содержит элементы под-подменю, соответствующие этой исходной ссылке, и скрывает всех, кроме себя и своих родителей.
имейте в виду, если им объяснять это правильно. моя голова немного глупая от попыток решить эту проблему в течение всего дня и им о прогибаться в
это пример того, что им пытаются достичь:.
если вы хотите идите сюда, чтобы увидеть то, что я сделал http://jsfiddle.net/pi_mai/zuU5M/ Так я пытаюсь сделать меню с этим HTML кодом (я удалить много элементов ссылки, чтобы сократить код):
<nav>
<ul class="topmenu">
<li class="topmenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="topmenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="subsubmenu submenu-item-1">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-1">
<li class="submenu-item-7"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-8"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-2">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
<ul class="submenu topmenu-item-3">
<li class="submenu-item-1"><a href="" class="topmenu-link">top menu</a></li>
<li class="submenu-item-2"><a href="" class="topmenu-link">top menu</a></li>
</ul>
</nav>
.
$('.topmenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.submenu').not(this).removeClass('toggle');
$('.submenu.' + itemClass).toggleClass('toggle');
$('.subsubmenu.toggle').siblings().removeClass('toggle')
});
$('.submenu > li').on('click',function(){
var itemClass = $(this).attr('class');
console.log(itemClass)
$('.subsubmenu').not(this).removeClass('toggle');
$('.subsubmenu.' + itemClass).toggleClass('toggle');
});
Может ли кто-нибудь мне помочь?
EDIT
Я думаю, что у меня есть решение, просто нужно добавить анимацию, но это в целом работает, и что для меня это просто фантастика!
function menuTap($this){
var thisClass = $this.attr('class');
if($this.parent().hasClass("top-menu")){
$('.sub-menu.' + thisClass).animate().toggleClass('hide');
$('.sub-menu' + ':not(.' + thisClass + '), .sub-sub-menu').addClass('hide');
};
if($this.parent().hasClass("sub-menu")){
console.log($this.attr('class') + ' li was clicked')
$('.sub-sub-menu.' + thisClass).toggleClass('hide');
$('.sub-sub-menu' + ':not(.' + thisClass + ')').addClass('hide');
};
}
$('.top-menu li, .sub-menu li').on('click',function(){
menuTap($(this));
});
Нормальная структура меню не является лучшим решением этой проблемы, как это было что-то я первоначально пытался для достижения.Метод, который у меня есть chossen, так что суб-подменю может разрывать подменю. с типичной системой меню суб-подменю будет просто отображаться внизу. – Doug
На самом деле, вся суть этой структуры такова, что подменю появляются там, где они попадают в родительский список. Как они выглядят, зависит от ваших особенностей CSS и jQuery. Во всяком случае, удачи. – isherwood