J'ai besoin d'aide. J'ai regardé partout mais je pense que ce que je cherche est un peu unique.menu jquery horizontal avec sous-sections
J'essaie de faire un menu qui lorsque vous cliquez sur une option de menu un groupe d'options. Ce morceau que j'ai, je pense. Ce que j'essaie d'accomplir maintenant, c'est de permettre aux enfants du sous-menu de glisser directement entre les lignes de liens. un peu comme un menu accordéon horizontal, avec l'avantage d'avoir tous les liens du menu supérieur dans une rangée plutôt que verticalement.
l'action, cliquez sur l'élément de menu supérieur et un lien sous-menu (s) apparaîtra. Si un lien de sous-menu est cliqué, ce lien affichera les éléments de sous-sous-menu correspondant à ce lien original et cachera tout sauf lui-même et ses parents.
Je ne suis pas un père si je l'explique correctement. ma tête est un petit cerveau mort d'essayer de résoudre ce problème toute la journée et im sur le point de s'effondrer
ceci est un exemple de ce que im essayant d'atteindre.
si vous voulez aller ici pour voir ce que je l'ai fait http://jsfiddle.net/pi_mai/zuU5M/ donc je suis en train de faire un menu avec ce code HTML (je l'ai supprimer de nombreux éléments de lien pour raccourcir le code):
<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');
});
Quelqu'un peut-il m'aider?
EDIT
je pense avoir la solution, juste besoin d'ajouter de l'animation, mais il travaille ensemble et que pour moi est fantastique!
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));
});
structure de menu normale n'a pas été la meilleure solution à ce problème car il était quelque chose que j'avais initialement essayé accomplir.La méthode que j'ai choisie est telle que les sous-sous-menus peuvent déchirer des sous-menus. avec le système de menu typique, le sous-sous-menu apparaîtra juste en bas. – Doug
En fait, tout le point de cette structure est tel que les sous-menus apparaissent là où ils tombent dans la liste parente. Leur apparence dépend de vos spécificités CSS et jQuery. Quoi qu'il en soit, bonne chance. – isherwood