Как добавить подменю в это отзывчивое меню?

У меня есть эта отзывчивая навигация. Но я не могу добавить многоуровневое подменю в эту навигацию. Как добавить многоуровневую суб меню для этого responsive navigation linkКак добавить подменю в это отзывчивое меню?

источник

2015-06-24 Subhajit Panja

Я видел вашу ** ссылку образца **. Когда вы хотите, чтобы ** подменю ** отображалось? Это когда ** зависает ** или ** щелкните **? –

Сделали некоторые изменения

Я обновил скрипку SubItems также переключаясь.

Примечание: изменения CSS должны быть сделаны, работая по функциональности

ДЛЯ РАБОЧЕГО СТОЛА

вы можете написать следующий сценарий любой ширине вы хотите

if($(window).width()>"760") { 
    $("ul.main li").on("click",function(){ 
     if($(this).closest("li").children("ul").length) { if($(this).hasClass("subOpen")){ 
     $(this).removeClass("subOpen"); 
     $(this).find("ul.submenu").hide(300); 
     } 
     else {             
     $(this).addClass("subOpen"); 
     $(this).find("ul.submenu").show(300); 
     } 
                 } 
     }); 
    }

МОБИЛЬНАЯ ВЕРСИЯ

//MENU TOGGLE FUNCTION 
    $('.rmm-button').click(function(){ 
      // $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){ 
       if ($(this).is(".rmm-closed")) { 
        alert($(this).parent().parent().html()); 
        $(this).parent().parent().find("ul.main").show(300); 
        $(this).removeClass("rmm-closed"); 
       } 
       else { 
        alert($(this).html()); 
        $(this).find('ul').stop().hide(300); 
        $(this).addClass("rmm-closed"); 
       } 

      }); 

//SUBMENU TOGGLE FUNCTION 
    $(".rmm-toggled ul li").on("click",function(){ 
    if($(this).closest("li").children("ul").length) { 
      if($(this).hasClass("subOpen")){ 
      $(this).removeClass("subOpen"); 
      $(this).find("ul.submenu").hide(300); 
     } 
     else{ 
     $(this).addClass("subOpen"); 
     $(this).find("ul.submenu").show(300); 
     } 


    }

Here's Fiddle

источник

2015-06-24 06:38:41

да это здорово и отлично работает в мобильном режиме http://jsfiddle.net/vaibviad/hh16upps/2/ Но это не работает (подменю не отображается) Разрешение на рабочий стол 1024 пикселей –

@SubhajitPanja Обновлен ответ. . Взгляни –

если вы хотите добавить подменю, поместите новый ul тег внутри li:

<ul class="menu"> 
    <li><a href='#home'>Home</a></li> 
    <li> 
     <a href='#about-me'>About me</a> 
     <ul class="submenu"> 
      <li><a href='#'>SubItem</a></li> 
     </ul> 
    </li> 
    ... 
</ul>

Тогда с некоторыми CSS и JS код, который вы можете создать приятное отзывчивое меню.

CSS

.submenu { 
    display: none; 
}

$('.menu > li').hover(function() { 
    // Show submenu 
    $(this).find('> ul.submenu').show(); 
}, function() { 
    // Hide submenu 
    $(this).find('> ul.submenu').hide(); 
});

источник

2015-06-24 06:13:25 Mivaweb

Я применил этот способ, но не могу работать См. Ниже ссылку http://jsfiddle.net/goldfingerxyz/8m2c39uy/ –

Вы не указали свои js в своем jsfiddle – Mivaweb

http://jsfiddle.net/goldfingerxyz/8m2c39uy/1/ –

Я думаю, что вы использовали http://responsivemobilemenu.com/en/. Он все еще не должен иметь эту функцию. Они четко отмечают на своем сайте. С некоторым серьезным взломом кода может дать вам решение. В противном случае существует множество хороших плагинов для выполнения ваших требований.

источник

2015-06-24 06:18:12 nithin

да Я согласен с тобой –

Если вы хотите помочь мне, дайте мне знать! – nithin

Как добавить подменю в это отзывчивое меню?

ответ

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