Question

我有这个响应式导航。但我无法在此导航中添加多级子菜单。如何在此添加多级子菜单 responsive navigation link

Answer 1

做了一些改变

我已经更新了小提琴SubItems也在切换。

注意：必须进行CSS更改，处理功能

FOR DESKTOP

你可以写下面的脚本 您想要的任何宽度

 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

如果您想添加子菜单，请在/updates内添加新的ul标记：

li

然后使用一些CSS和JS代码，您可以创建一个很好的响应式菜单。

<强> CSS

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

<强> JS

.submenu {
    display: none;
}

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

3 个答案: