i have a menu with 4 main items and each one having 3 to 5 sub items.
<ul id="navigation">
<li><a>Diagonóstico</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na pra de qualquer serviço) </a>
</li>
<li><a>Hardware</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a>
Please check the full code.
As you can see in the jsFiddle, all menu items, when clicked show some text in another div. I put that there just in case it was be needed for further javascript help. What i want is to have all .sub menus collapsed and when i mouseover one of the main ones, it expands the corresponding .sub items so user can see. Thanks!
EDIT:
I managed to get a nice tutorial in one of the ments and came up with THIS!
What i need now is a way to show ALL the .sub menus from the corresponding .main menus instead of only the first ones.
i have a menu with 4 main items and each one having 3 to 5 sub items.
<ul id="navigation">
<li><a>Diagonóstico</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na pra de qualquer serviço) </a>
</li>
<li><a>Hardware</a>
</li>
<li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a>
Please check the full code.
As you can see in the jsFiddle, all menu items, when clicked show some text in another div. I put that there just in case it was be needed for further javascript help. What i want is to have all .sub menus collapsed and when i mouseover one of the main ones, it expands the corresponding .sub items so user can see. Thanks!
EDIT:
I managed to get a nice tutorial in one of the ments and came up with THIS!
What i need now is a way to show ALL the .sub menus from the corresponding .main menus instead of only the first ones.
Share Improve this question edited Apr 14, 2013 at 23:23 Bruno Charters asked Apr 14, 2013 at 22:00 Bruno ChartersBruno Charters 4942 gold badges6 silver badges15 bronze badges 7- 2 youtube./watch?v=qBh_lMO_SDM check this out! – auicsc Commented Apr 14, 2013 at 22:11
- 1 Are you specifically looking for a javascript solution? You can acplish this with CSS and some adjustment to your HTML if you like. – Dave Commented Apr 14, 2013 at 22:52
- @dentaku i managed to get a nice script to work from the video above, i just need a bit tweak and i'll be good to go. (: – Bruno Charters Commented Apr 14, 2013 at 23:02
- @auicsc I used that tutorial and came up with something really neat, altho still need some tweaks. – Bruno Charters Commented Apr 14, 2013 at 23:08
- @BrunoCharters Glad to hear it. If you're ever interested in a straight CSS solution, look into the :hover psuedo-class. :) – Dave Commented Apr 14, 2013 at 23:12
2 Answers
Reset to default 10Using only HTML and CSS.
HTML
<ul id="menu">
<li><a href="SOME_LINK">Some menu without sub-menu</a></li>
<li><a href="SOME_LINK2">Some menu without sub-menu 2 </a></li>
<li>Some menu WITH sub-menu
<ul>
<li><a href="SOME_LINK">Some sub-menu</a></li>
<li><a href="SOME_LINK">Some sub-menu 2</a></li>
</ul>
</li>
<li><a href="SOME_LINK3">Some menu without sub-menu 3</a></li>
</ul>
CSS
ul>li>ul{display:none}
ul>li:hover>ul, ul>li:selected>ul{display:block}
JS (jQuery) to OPEN all submenus
$('#menu li>ul').parent().addClass('selected');
JS without Jquery
var menus = document.getElementById('menu').getElementsByTagName('li')
for(var row in menus){
if(typeof menus[row] == 'object' && menus[row].getElementsByTagName('ul').length > 0){
menus[row].getElementsByTagName('ul')[0].className = 'selected';
}
}
My solution is similar to the one mentioned in the question edit, but an already open list item does not re-open when beging clicked: http://jsfiddle/g5oc0uoq/
$('.content').hide();
$('.listelement').on('click', function(){
if(!($(this).children('.content').is(':visible'))){
$('.content').slideUp();
$(this).children('.content').slideDown();
} else {
$('.content').slideUp();
}
});
show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.