如何将子菜单添加到此响应菜单中？

Question

我有这个响应navigation.But我不能添加多级子菜单到此导航。 我怎样才能多级子菜单添加到这个 responsive navigation link

Answer 1

已经取得了一些变化

我已经更新了小提琴子项目也被切换。

注：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

Answer 2

，如果你想添加一个子菜单，将新的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; 
} 

JS

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

Answer 3

我想你使用http://responsivemobilemenu.com/en/。它仍然没有假设有这个功能。他们明确记录在他们的网站。随着一些严重的代码破解可能会给你一个解决方案。否则，有很多很好的插件来满足您的要求。