2

我在这里有一个 jsfiddle - http://jsfiddle.net/2r3Ap/

和这里的演示 - http://www.ttmt.org.uk/forum/

这是一个简单的响应式菜单。调整窗口大小时，水平菜单将移动到垂直菜单并隐藏。然后红色按钮控制导航菜单上下滚动。当窗口被调整得更大时，水平菜单应该再次显示。

周围有很多这样的东西，我认为重建起来很容易。

我的问题是：

如果窗口变小了，垂直菜单用按钮打开和关闭，然后窗口变大，导航将保持隐藏状态。

我需要在打开或关闭垂直菜单时将窗口大小调整为更大时出现水平菜单。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <title>Title of the document</title>

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

      <style type="text/css">

        *{
          margin:0;
          padding:0;
        }
        header{
          max-width:600px;
          margin:0 auto;
          background:#aaa;
          overflow:auto;
          padding:30px 50px 0 50px;
          border-left:10px solid #fff;
          border-right:10px solid #fff;
        }
        button{
          width:30px;
          height:30px;
          background:red;
          display:none;
          border:none;
        }
        nav{
          margin:10px 0 0 0;
        }
        nav li{
          display:inline;
        }
        nav li a{
          float:left;
          display:inline-block;
          padding:5px;
          background:yellow;
          margin:0 5px 0 0 ;
        }
        nav li a:hover{
          background:#fff;
        }

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

          button{
            display:block;

          }
          nav{
            display:none;
          }
          nav li{
            display:block;
          }
          nav li a{
            float:none;
            display:block;
            padding:5px;
            background:yellow;
            margin:0 5px 0 0 ;
          }

        }
      </style>

      </head>

    <body>

      <div id="wrap">

        <header>
          <button></button>
          <nav>

            <ul>
              <li><a href="">One</a></li>
              <li><a href="">Two</a></li>
              <li><a href="">Three</a></li>
              <li><a href="">Four</a></li>

            </ul>
          </nav>  

        </header>  

      </div><!-- #wrap -->

      <script>

        $(function(){
          $('button').click(function(){
            $('nav').slideToggle();
          })
        })

      </script>

    </body>

    </html>
4

3 回答 3

2

问题是它不知道当屏幕足够大时它应该显示导航栏。只需添加display: block到nav媒体查询之外的样式。

nav{
    margin:10px 0 0 0;
    display: block;
}

jsFiddle

通常：您在媒体查询中定义的任何内容都应该在其之外具有“默认”值。

于 2013-04-04T16:29:21.660 回答
2

@jimjimmy1995 有最简单的解决方案，但另一种方法是使用 jQuery 的.resize()方法：

$(function ()
{
    var $window = $(window),
        $nav = $('nav'),
        $button = $('button');

    $button.on('click', function ()
    {
        $nav.slideToggle();
    });

    $window.on('resize', function ()
    {
        if ($window.width() > 400)
        {
            $nav.show();
        }
    });
});

请参阅工作 jsFiddle 演示

于 2013-04-04T16:35:40.057 回答
2

另一种资源消耗较少的方法是在slideToggle方法上使用回调函数。回调函数会说，“当动画结束时，移除内联display属性并为元素添加一个类。”

新的调用slideToggle将如下所示：

$(function(){
  $('button').click(function(){
    $('nav').slideToggle(400, function(){
      $('nav').toggleClass('mobile-down').css('display', '');
    });
  });
});

和CSS：

.mobile-down {
  display: block;   
}

这是一个修改过的小提琴。

为了进一步解释，我在找到这个之前刚刚完成了一个自我回答的问题。

于 2013-05-02T19:38:04.620 回答