如何使导航栏元素出现或消失

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 */ 
}