CSS/Jquery - 在移动/标签上查看时的导航下拉菜单

Question

我在子菜单上有一个带有下拉悬停的导航栏，它在桌面上运行良好，但在移动设备上运行不佳，因为它涵盖了所有其他选项卡，而且在移动设备上运行不佳触摸屏，只要您将手指从下拉菜单上移开，悬停就会消失。我希望能够单击子菜单上的下拉菜单，然后排成一行。很像在移动视图中的导航本身。

Jsfiddle Demo

---

HTML

<nav class="clearfix">
<div class="menu-main-menu-container">
    <ul class="menu" id="menu-main-menu-1">
        <li class=
        "menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-86">
        <a href="#">Home</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-148">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
        <a href="#">dropdown</a>
            <ul class="sub-menu">
                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-320">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-321">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-322">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-323">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-324">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-327">
                <a href="#">other sub tab</a>
                </li>

                <li class=
                "menu-item menu-item-type-custom menu-item-object-custom menu-item-328">
                <a href="#">other sub tab</a>
                </li>
            </ul>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-136">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-147">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-7">
        <a href="#">other tab</a>
        </li>

        <li class=
        "menu-item menu-item-type-post_type menu-item-object-page menu-item-58">
        <a href="#">other tab</a>
        </li>
    </ul>
</div>
<a href="#" id="pull">Menu</a>

CSS

nav {
    height:40px;
    width:100%;
    color:#fff;
    background:#86c024;
    font-size:11pt;
    position:relative
}

nav a {
    color:#fff;
    display:inline-block;
    width:auto;
    text-align:center;
    text-decoration:none;
    line-height:40px
}

nav ul {
    padding:0;
    margin:0 auto;
    max-width:1000px;
    width:100%
}

nav li {
    display:inline;
    float:left;
    height:40px;
/* this should be the same as your nav height */
    position:relative
/* this is needed in order to position sub menus */
}

nav li a {
    padding:0 15px;
    border-right:1px solid #fff;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
}

nav a:hover {
    background:#2098d1;
    color:#fff;
    width:100%
}

nav ul ul {
/* this targets all sub menus */
    display:none;
/* hide all sub menus from view */
    position:absolute;
    left:0;
    top:40px
/* this should be the same height as the top level menu -- height + padding + borders */
}

nav li li a {
    border:none;
    font-size:10pt
}

nav ul ul li {
/* this targets all submenu items */
    float:none;
/* overwriting our float up above */
    width:100px
/* This needs to match the value we set below */
}

nav ul ul li a {
/* target all sub menu item links */
    padding:5px 10px
}

nav ul li:hover > ul {
    display:inline-block;
/* show sub menus when hovering over a parent */
    background:gray;
    text-align:center;
    border:0;
    z-index:100
}

nav li a:link,a:visited {
    color:#fff
}

nav li:last-child a {
    border-right:0
}

nav ul li.current-menu-item a:link,nav ul li.current-menu-item a:visited,nav ul li.current-page-ancestor a:link,nav ul li.current-page-ancestor a:visited {
    font-weight:700;
    background:#2098d1;
    color:#fff
}

nav #pull {
    display:none
}

@media screen and (max-width: 600px) {
nav {
    height:auto
}

nav ul {
    width:100%;
    display:block;
    height:auto
}

nav li {
    width:100%;
    float:left;
    position:relative
}

nav li a {
    border-bottom:1px solid #fff;
    border-right:1px solid #fff
}

nav a {
    text-align:left;
    width:100%;
    text-indent:25px
}
}

@media only screen and (max-width : 600px) {
nav {
    border-bottom:0
}

nav ul {
    display:none;
    height:auto
}

nav #pull {
    display:inline-block;
    background:#86c024;
    width:100%;
    position:relative
}

nav #pull:after {
    content:"";
    background:red;
    width:30px;
    height:30px;
    display:inline-block;
    position:absolute;
    right:15px;
    top:10px
}
}

@media only screen and (max-width : 320px) {
nav ul li ul li {
    width:100%;
    height:auto
}

nav li {
    display:block;
    float:none;
    width:100%
}

nav li a {
    border-bottom:1px solid #576979
}
}

Javascript

$(function() {
        var pull        = $('#pull');
            menu        = $('nav .menu');
            menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function(){
            var w = $(window).width();
            if(w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

Answer 1

首先你需要纠正一些 HTML、css 和 JS 的东西。

1) 我在 ul 之前保留了你的菜单开启器标签。

2) 然后禁用 css 菜单悬停在 600 和 320 视图中打开

3) 如果有子菜单，则绑定 jquery 点击事件。

$(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
});

您可以查看下面的 jsFiddle 并与您的比较。

View Here

我会建议你，如果你是新人，那么使用引导程序。这将对您有所帮助。并将帮助您加快开发速度。

否则，如果您想学习，那是很好的尝试。但请记住，总会有改进的机会。

Answer 2

为下拉标签添加 id 有助于获得正确的子菜单

  $('#dropdown_submenu').click(function(){
       $(this).next().toggle();
  });

将此添加到 css

@media only screen and (max-width : 600px) {

     nav ul li:hover > ul {
      display: none; 
    }
   nav ul li > ul{
        background: gray;
      text-align: center;
      border: 0;
      z-index: 100;
    }
}
@media only screen and (max-width : 320px) {

    nav ul li:hover > ul {
      display: none; 

    }
     nav ul li > ul{
        background: gray;
      text-align: center;
      border: 0;
      z-index: 100;
    }

}

检查这个：jsfiddle