如何使導航欄元素出現或消失

Question

/*我也有我的元視口標籤設置爲我的index.php文件上的設備寬度。

<header class="site-header"> 
<nav class="site-nav"> 
    <ul><h4> 
     <li><a href="index.php"><img src="/inc/menubutton.png" style="width:25px; height: 25px;"></a></li>   
     <li><form name="search" method="post" action="searchresults.php"></li> 
     <li><input type="text" class="searchbar" value="Search" style="width:400px;"></li> 
     <li><input type="image" class="searchbutton" src="inc/searchbutton.png" alt="Submit Form" style="height: 25px; width: 25px;"></li> 
     </form> 
     <li><a href="member.php"><img src="inc/ Memberbutton.png" style="width:25px; height:25px;"></a></li> 
     <li><a href="cart.php"><img src="inc/cart.png" style="width:25px; height:25px;"></a></li> 
    </ul></h4> 
</nav> 

這是我的CSS：

.site-nav ul { 

margin: 0; 
padding-left: 20px; 
background-color: black; 

.site-nav ul:before, .site-nav:after {content: ""; display: table; } 
.site-nav ul:after {clear:both; } 
.site-nav ul { *zoom: 1; } 

.site-nav ul li { 
list-style: none; 
float: left; 
padding: 10px; 

我希望能夠讓搜索欄移動視線中消失，使得用戶可以點擊搜索按鈕並彈出一個div。如果任何人有關於使用JQuery更具動態性的建議，那將非常棒。我希望它具有滑出效果。我沒有使用JQuery的經驗，但我對JavaScript有一些經驗。感謝您的時間和耐心。

Answer 1

而不是使用JS，可以只使用CSS media queries根據屏幕寬度這樣來顯示/隱藏元素：

HTML：

<input type="text" class="searchbar" value="Search" style="width:400px;"/> 

CSS：

@media (max-width: 480px) { 
    input.searchbar { 
     display:none; 
    } 
} 
@media (min-width: 481px) { 
    input.searchbar { 
     display:block; 
    } 
} 

另外，你的html語法都搞砸了。我不確定您是否試圖將<ul></ul>包裝在<h4></h4>下，反之亦然。爲什麼你的表單的每一行無論如何都是一個列表項？

Answer 2

對於搜索按鈕，您可能正在尋找類似this的東西。此代碼是用jQuery的，所以請不要忘了，包括你的頭標記的開始Jquery的API：

然後，添加下面的jQuery來你的頭：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#clickMe').click(function() { 
     $('#test-div').show(); 
     $('#test-div').animate({ 'opacity': '+=1.0' },300); 
    }) 
}); 
</script> 

添加以下HTML到您的網頁：

<button id="clickMe">Please click me</button> 
<div id="test-div">Hi!</div> 

最後但並非最不重要的，加一些CSS，使div和按鈕的外觀花哨：

#test-div { 
    width:100px; 
    height:100px; 
    background:red; 
    display:none; /* THIS IS NECESSARY */ 
    opacity:0.0; /* THIS IS ALSO NECESSART */ 
}