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

Question

我有这个响应式 navigation.But 我无法向该导航添加多级子菜单。如何为此添加多级子菜单 responsive navigation link

Answer 1

如果要添加子菜单，请在 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();
});

Answer 2

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

Answer 3

做了一些改动

我已经更新了 fiddle 子项也在切换。

注意：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);
       }
                                                       }
       });
    }

MOBILE VERSION

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

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

How can I add submenu to this responsive menu?

html

css

navigation

jquery

responsive-design