移動整合jQuery的菜單 - 從移動分辨率的桌面工作不正常

我試圖將一個jQuery菜單下面的代碼移動（見下文）的舉動。我包括標題和菜單，腳本和CSS的HTML。我遇到的問題是，如果移動菜單被激活，然後我放大瀏覽器窗口，桌面尺寸（分辨率）類選擇的菜單有一個顯示：無屬性。當解析度高於900px時，我無法弄清楚如何去除這個屬性。移動整合jQuery的菜單 - 從移動分辨率的桌面工作不正常

<div id="header"> 
     <div class="logoandnav"> 
      <a id="logo" href="http://localhost/wordpress2"><img src="#></a> 
      <ul class="menu"> 
       <li><a href="http://localhost/wordpress2">Portfolio</a></li> 
       <li><a href="http://localhost/wordpress2/?page_id=775">Services</a></li> 
       <li><a href="http://localhost/wordpress2/?page_id=736">About</a></li> 
        </ul> 
     </div> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($){ 
    /* prepend menu icon */ 
    $('#header').prepend('<div id="menu-icon" data-toggle="collapse">Menu</div>'); 
    /* toggle nav */ 
    $("#menu-icon").on("click", function(){ 
     $(".menu").slideToggle(); 
     $ (this) .toggleClass("active"); 
     }); 
      }); 

     </script> 

#header{ 
background: rgba(255,255,255,0.9); 
border-bottom: 1px solid rgba(0,0,0,0.1); 
padding: 20px 0 10px 0; 
position: fixed; 
top: 0; 
width: 90%; 
z-index: 991; 
height:80px; 
/*box-shadow:1px 1px 3px rgba(255,255,255,0.5);*/ 
box-shadow: 0 0 30px rgba(0,0,0,.10); 
-webkit-box-shadow: 0 0 30px rgba(0,0,0,.10); 
-moz-box-shadow: 0 0 30px rgba(0,0,0,.10); 
display:block; 
} 
#logo{ 
float:left; 
text-align:center; 
margin-top:0px !important; 
margin-bottom:0px !important; 
} 
.logoandnav{ 
max-width:1200px; 
margin-left:50px; 
margin-top:10px !important; 
height:60px; 
} 
ul li a:hover{border-bottom:3px solid #507abf;color:#507abf;} 
.menu{float:right;line-height:50px;} 
ul.menu li,.menu{display:inline;} 
#menu-icon{display:none;} 

ul li{ 
display:inline; 
list-style:none !important; 
padding-left:25px !important; 
font-family: 'Archivo Narrow', Arial,sans-serif; 
font-weight:800; 
font-size:22px !important; 
} 

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


ul li{font-size:18px !important;} 

#menu-icon{ 
color:black; 
width:42px; 
height:30px; 
padding:12px 20px 0px 20px; 
cursor:pointer; 
display:block; 
float:right; 
margin-top:30px; 
font-size:14px; 
text-transform:uppercase; 
background:url('http://localhost/wordpress2/wp-content/uploads/2013/12/menu_button.png') no-repeat left center; 
} 

#menu-icon:hover{color:#33B779;} 
.menu{display:none;} 
.menu{ 
clear:both; 
position:absolute; 
top:70px; 
right:0px; 
width:140px; 
z-index:1000; 
padding:5px; 
background-color:white; 
border:1px solid grey; 
line-height:30px; 
}

來源

2014-01-05 OAK

變化@media only screen and (max-width: 767px)到@media screen and (max-width: 767px)

來源

2014-01-05 19:33:20 DenisIsaychX

感謝您的答覆。不幸的是，這不利於這種情況。當@media查詢被激活時，我使用移動菜單（即打開菜單並關閉它），.menu選擇器被賦予一個display：none屬性。大小調整屏幕（擴大它）的結果在所有 – OAK

沒有菜單，如果你看看網站的真人版我會很感激。 http://www.okulka.com – OAK

對於這個網站，你可以爲你的效果$（窗口）.resize（函數（）{ 添加腳本如果（$（窗口）.WIDTH（）> 768）{ $（」。。菜單「）顯示（）;} }）; 但是，更好看這個例子http://codepen.io/bradfrost/pen/sHvaz – DenisIsaychX

移動整合jQuery的菜單 - 從移動分辨率的桌面工作不正常

回答

相關問題