Question

这是我的代码： HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Responsive Menu</title>
    <link rel="stylesheet" href="css/colors.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
    <p>Some title</p>

    <nav class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </nav>

    <div class="nav-trigger">
        <span><i class="fa fa-bars fa-2x"></i></span>
    </div>

    <nav class="mobile-menu-enabler">
        <span></span>
    </nav>
</header>

<nav class="mobile-menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>


<!-- Begin main sample site content -->
<div id="wrapper">
    <p>Lorem ipsum dolor set amet...</p>
</div>


<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>

CSS：

body {
    font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

p {
    margin: 0;
    padding: 0;
    display: inline-block;
}

header {
    margin: 0;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: azure;
    border: 1px solid black;
    width: 100%;
}

/* Begin Menu Code */
.menu {
    display: inline-block;
    float: right;
}

.menu ul {
    list-style: none;
    margin: 5px 0;
}

.menu ul:last-child {
    margin-right: 10px;
}

.menu ul li {
    display: inline-block;
    margin: 0 2px;
    padding: 0;
    border: 1px solid black;
}

.menu ul li a {
    text-decoration: none;
    color: black;
    padding: 3px;
}

.menu ul li>:hover {
    background-color:black;
    color: white;
}
/* End Menu Code */

/* Mobile Menu Begin */
.mobile-menu-enabler {
    display: none;
    background-color: aqua;
}

.mobile-menu {
    display: none;
    position: relative;
    top: 38px;
    width: 100%;
    border-top: 1px solid black;
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu ul li {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    border-top: 1px solid transparent;
    text-align: center;
}

.mobile-menu ul li a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: black;
}

.mobile-menu ul li:hover {
    background-color: darkkhaki;
}
/* Mobile Menu End */

/* Mobile Trigger Button */
.nav-trigger {
    display: none;
    text-transform: uppercase;
    color: black;
    background-color: transparent;
    margin-right: 10px;
    padding: 0;
    text-align: center;
}

.nav-trigger:hover {
    color: red;
    background-color: transparent;
}
/* End Mobile Trigger Button */


/* Dummy wrapper stuff */
#wrapper {
    clear: both;
    display: inline-block;
    position: relative;
}
/* End Dummy wrapper stuff */

@media screen and (max-width: 900px) {
    .menu {
        display: none;
    }

    .mobile-menu-enabler {
        display: block;
    }

    .nav-trigger {
        display: inline-block;
        float: right;
    }

    /*.mobile-menu {*/
        /*display: block;*/
    /*}*/
}

JavaScript的：

$(document).ready(function(){ // Begin document ready function
    var headerHeight = $("#topbar").height();

    $(".nav-trigger").click(function() {
        $(".mobile-menu").slideToggle(400)
    });

    $(".mobile-menu").css("top", headerHeight);

    $("#wrapper").css("top", headerHeight);
}); // End document ready function

当页面加载时，我有一个包含虚拟链接的顶部标题栏。当浏览器宽度缩小到断点900px以下时，响应式菜单会启动，此时点击“3栏图标”后，下拉菜单会按预期显示。

但是，如果我在没有先关闭下拉菜单的情况下将屏幕调整为完整尺寸，即使在浏览器完全展开后它仍然保持不变。

如何让下拉菜单在比900px的断点更宽的点上自动“解开”？

由于

编辑：截图： First image

Second image

Third image

Fourth image

以下是我喜欢它的行为方式： callmenick.com/lab-demos/10-simple-responsive-navigation 移动导航完全展开后，一旦浏览器窗口展开，它就会自动向上滑动

Answer 1

由于您在点击该菜单栏图标时使用Javascript来切换显示，因此它几乎会使显示屏无效。 css for .mobile-menu在某种程度上（因为它在css已经加载后改变了样式）。因此，您需要切换UL显示值（子），而不是.mobile菜单（父级）。这样响应式.mobile-menu css保持不变...我相信这就是你提到的那个示例站点。

<nav class="mobile-menu">
    <ul class="mobile-menu-items">
        <li><a href="#">Home</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact Me</a></li>
    </ul>
</nav>

将.mobile-menu的css保持为display：none在大屏幕上，并显示：block for larger。然后是新课程＆＃34; .mobile-menu-items＆＃34;您最初可以将其设置为display：none，并使用您的jQuery切换：

$('.nav-trigger').click(function(){
    $('.mobile-menu-items').slideToggle();
});

或者，您可以切换可见性而不是显示。

$('.nav-trigger').click(function(){
  if ( $('.mobile-menu').css('visibility') == 'hidden' )
    $('.mobile-menu').css('visibility','visible');
  else
    $('.mobile-menu').css('visibility','hidden');
});

Answer 2

updated.extremely粗略的例子。调整大小

ul{list-style-type:none;}

@media screen and (min-width: 500px) {
  
  #big li{display:inline-block;width:100px;height:32px;border:1px solid red;}
  #small{display:none;}
  
  }

@media screen and (max-width: 500px) {
  
  #big{display:none;}
  #small{display:block;}
  .smaller{display:none;}
  #small li:hover~ul{display:block}
  .smaller:hover{display:block;}
  
  }

<ul id="big">
  <li>1</li>
   <li>1</li>
   <li>1</li>
   <li>1</li>
  </ul>
<ul id="small">
  <li>home1</li>
        <ul class="smaller">
          <li>3</li>
          <li>3</li>
          <li>3</li>
          <li>3</li>
        </ul>

   <li>home2</li><ul class="smaller">
          <li>3</li>
          <li>3</li>
          <li>3</li>
          <li>3</li>
        </ul>
  </ul>

Answer 3

如果您想要在窗口过宽时实际收回移动菜单（而不是仅仅隐藏在CSS中），请尝试以下操作：

var $window = $(window), // caching the objects for performance
    $mobileMenu = $(".mobile-menu");

$window.resize(function(){

  if( $window.width() > 900) $mobileMenu.slideUp();

})

即使在浏览器调整大小后，响应式菜单也不会关闭

3 个答案: