如何向此响应式菜单添加子菜单？

Question

我有这个响应式导航。但是我不能在这个导航中添加多级子菜单。 如何向此添加多级子菜单 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

我认为你使用了http://responsivemobilemenu.com/en/。它仍然不应该具有该功能。他们在他们的网站上清楚地记下了。一些严重的代码破解可能会给你一个解决方案。否则有很多好的插件可以满足您的要求。

Answer 3

如果要添加子菜单，请在li 内添加一个新的ul 标签：

<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();
});