Как я могу сделать меню списка «разборным»?

У меня есть меню с 4 основными пунктами, и каждый из них имеет от 3 до 5 подпунктов.Как я могу сделать меню списка «разборным»?

<ul id="navigation"> 
    <li><a>Diagonóstico</a> 

    </li> 
    <li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na compra 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>

Пожалуйста, проверьте full code.

Как вы можете видеть в jsFiddle, все пункты меню при щелчке показывают некоторый текст в другом div. Я поставил это на всякий случай, если понадобится дальнейшая помощь javascript. Я хочу, чтобы все .sub-меню рухнули, и когда i mouseover один из основных, он расширяет соответствующие .sub элементы, которые пользователь может видеть. Спасибо!

EDIT:

мне удалось получить хороший учебник в одном из комментариев и придумал THIS!

Теперь мне нужно показать ВСЕ меню .sub из соответствующих .main меню, а не только первых.

источник

2013-04-14 Bruno Charters

http://www.youtube.com/watch?v=qBh_lMO_SDM проверить это! – auicsc

Вы специально ищете решение для javascript? Вы можете выполнить это с помощью CSS и некоторой корректировки вашего HTML, если хотите. – dentaku

@ dentaku Мне удалось получить хороший скрипт для работы с видео выше, мне просто нужно немного настроить, и я буду в порядке. (: –

Использование только HTML и 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), чтобы открыть все подменю

$('#menu li>ul').parent().addClass('selected');

JS без 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'; 
    } 
}

источник

2013-04-15 01:31:59

было бы правильным решением сэр. Благодарю. Я правильно отмечаю, если вы знаете, что я мог бы сделать, чтобы настроить мои js на показ ALL подменю. Расскажи мне. –

Проверьте изменения. –

Я не мог заставить это работать. странно. я все смотрю прав. вы можете сделать меня jsfiddle? –

Мое решение аналогично тому, упомянутых в вопросе редактирования, но уже открыт элемент списка не повторно открыть, когда на букву щелкнул: http://jsfiddle.net/g5oc0uoq/

$('.content').hide(); 
$('.listelement').on('click', function(){ 
    if(!($(this).children('.content').is(':visible'))){ 
    $('.content').slideUp(); 
    $(this).children('.content').slideDown(); 
    } else { 
    $('.content').slideUp(); 
    } 
});

шоу() и скрыть() можно использовать вместо slideUp() и slideDown(), если у вас проблемы с производительностью.

источник

2014-08-18 08:45:14 wildthing

Как я могу сделать меню списка «разборным»?

ответ

Смежные вопросы