加载网站时，Javascript按钮处于活动状态

Question

我为智能手机等设计了一个响应式设计的网站。 菜单消失，当您使用智能手机时，会出现一个按钮以打开菜单。 要激活按钮，我实现了这个javascript：

  $(document).ready(function() {
    $('.menubutton').click(function() {
      $('.nav').slideToggle('slow');
    });
  });

但是当我使用我的智能手机登录网站时，菜单是标准的开放性。但我希望如果我去网站菜单关闭。我怎么能这样做？

PS： 对不起，我之前从未真正使用过javascript：）

Answer 1

使用css media query

@media only screen and (max-width: 500px) { //fix size as you wish
    .nav{
    display:none;
    }
}

Answer 2

您必须使用媒体查询（在您的CSS文件中）并指定它应该在什么时候进入汉堡包菜单。

一旦屏幕尺寸为767px，以下媒体查询将触发菜单隐藏：

.navbar-toggle {
    display: block;
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
}