关闭页面加载响应菜单

Question

我创建了一个响应式导航菜单，但出于某种原因，我无法让它开始关闭。

如果您在此处查看网站http://riprap.pdslo.com并将您的屏幕重新调整为手机或平板电脑的尺寸，然后点击刷新，您将看到它在页面加载时打开。

这里是代码，如果有人想刺杀它，并尝试让菜单关闭页面加载。 （我为代码转储道歉，只是不知道我错了哪里。）

我将不胜感激任何帮助。

----- HTML代码-----

<nav id="menu-wrap">  
    <ul id="menu"> 
<li><a href="http://<?php echo $_SERVER['SERVER_NAME']; ?>/#">Home</a></li> 
<li>bla bla</li> 


    </ul> 
</nav> 

----- JS代码-----

 <script type="text/javascript"> 
$(function() { 
     if ($.browser.msie && $.browser.version.substr(0,1)<7) 
     { 
     $('li').has('ul').mouseover(function(){ 
      $(this).children('ul').css('visibility','visible'); 
      }).mouseout(function(){ 
      $(this).children('ul').css('visibility','hidden'); 
      }) 
     } 

     /* Mobile */ 
     $('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');  
     $("#menu-trigger").on("click", function(){ 
      $("#menu").slideToggle(); 
     }); 

     // iPad 
     var isiPad = navigator.userAgent.match(/iPad/i) != null; 
     if (isiPad) $('#menu ul').addClass('no-transition');  
});  
</script> 

--- --CSS代码-----

#menu-wrap{display:none;} 




    /* Mobile */ 
    #menu-trigger { 
     display: none; 
    } 




     #menu .top-list{display:none;} 
     /* nav-wrap */ 
     #menu-wrap { 
      position: relative; 
    display:none; 
     } 

     #menu-wrap * { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
     } 

     /* menu icon */ 
     #menu-trigger { 
      display:none; /* show menu icon */ 
      height: 45px; 
      line-height: 45px; 
      cursor: pointer;    
      color: #FFFFFF; 
      font-weight: 700; 
      background-color: #063346; 
      text-align:center; 
      font-family:"Bitter",sans-serif; 
      font-size:24px; 

     } 

     /* main nav */ 
     #menu { 
      margin: 0; 
      position: relative; 
      width: 100%; 
      z-index: 1; 
      background-color: #034A68; 
      display: block; 
      box-shadow: none;  
     } 

/*  #menu:after { 
      content: ''; 
      position: relative; 
      left: 25px; 
      top: -8px; 
      border-left: 8px solid transparent; 
      border-right: 8px solid transparent; 
      border-bottom: 8px solid #444; 
     }*/ 

     #menu ul { 
      position: relative; 
      visibility: visible; 
      opacity: 1; 
      margin: 0; 
      background: none; 
      box-shadow: none;    
     } 

     #menu ul ul { 
      margin: 0 0 0 20px !important; 
      box-shadow: none;  
     } 

     #menu li { 
      position:relative; 
      display: block; 
      float: none; 
      border: 0; 
      box-shadow: none; 
      width:100%;   
     } 

     #menu ul li{ 
      margin-left: 20px; 
      box-shadow: none;  
     } 

     #menu a{ 
      border-top: 1px solid #063346; 
      color: #FFFFFF; 
      display: block; 
      float: none; 
      padding: 10px 0; 
      text-align: center; 
      text-decoration: none; 
     } 

     #menu a:hover{ 
      color: #FFFFFF; 
      background:#045072; 
     } 

     #menu ul a{ 
      padding: 0; 
      width: auto;   
     } 

     #menu ul a:hover{ 
      background: none; 
     } 

     #menu ul li:first-child a:after, 
     #menu ul ul li:first-child a:after { 
      border: 0; 
     }  


@media only screen and (min-width: 768px) and (max-width: 959px) { 
    #menu-wrap{display:block;} 


     #menu .top-list{display:none;} 


    /* Mobile */ 
    #menu-trigger { 
     display: block; 
    } 

    } 



@media only screen and (max-width: 767px) { 
    #menu-wrap{display:block;} 


     #menu .top-list{display:block;} 


    /* Mobile */ 
    #menu-trigger { 
     display: block; 
    } 

} 

Answer 1

在CSS的行140（最后一部分），你必须添加以下内容：

#menu { display:none; } 

所以菜单隐藏在开始屏幕上低于767px。