网站下拉界面的实现

标签：js   css   html   .net   

      大家在逛网站的时候有没有遇到过，操作失误时会从网站顶端出现下拉框的提示，或者在某个网站的首页单击

mennu会出现下窗体的列表。下面小编带你一块儿来学习这是如何做成的。首先大家先看一下效果

    效果展示（1）：

    展示效果（2）：

    下面看一下代码是如何实现的。

    html代码：

<div class="menu">																
			<a href="#" class="right_bt" id="activator"><img src="images/nav_icon.png" alt=""></a>
				<div class="box" id="box">
				   <div class="box_content_center">
					   <div class="menu_box_list">
						   <ul>
							   <li><a href="index.html">Home</a></li>
							   <li class="active"><a href="about.html">About</a></li> 
							   <li><a href="blog.html">Blog</a></li> 
							   <li><a href="gallery.html">Gallery</a></li>
							   <li><a href="contact.html">Contact</a></li>
							   <li><a href="404.html">404</a></li>
						   </ul>
						</div>
						<a class="boxclose" id="boxclose"><img src="images/close.png" alt=""></a>
					  </div>                
					</div>

.box{
	position:absolute;
	top:-1200px;
	width:100%;
	color:#7F7F7F;
	margin:auto;
	padding:0px;
	z-index:999999;
	text-align:center;
	left:0px;
}
a.boxclose{
	cursor: pointer;
	text-align: center;
	display: block;
	position: absolute;
	top: 1.9em;
	right: 15em;
}
.boxclose span{
	width:45px;
	height:45px;
	display:inline-block;
	background: url(../images/image-sprite.png) no-repeat -8px -369px;
}
.boxclose span:hover{
	background: url(../images/image-sprite.png) no-repeat -6px -308px;
}

<script type="text/javascript">
								var $ = jQuery.noConflict();
									$(function() {
										//界面隐藏在屏幕上方
										$('#activator').click(function(){
												$('#box').animate({'top':'0px'},500);
										});
										//界面出现在屏幕上
										$('#boxclose').click(function(){
												$('#box').animate({'top':'-700px'},500);
										});
									});
									$(document).ready(function(){
									
									//Hide (Collapse) the toggle containers on load
									$(".toggle_container").hide(); 
									
									//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
									$(".trigger").click(function(){
										//使用滑动效果实现切换
										$(this).toggleClass("active").next().slideToggle("slow");
										return false; //Prevent the browser jump to the link anchor
									});
									
									});
								</script>

         通过前面对BS的学习我们不难发现实现该功能更所用到的技术，html构建基本框架，CSS实现界面的美化，JQuery

让界面动起来。这里实现下拉的界面的动态效果就是通过JQuery来实现的，明白了这些做起来就顺畅了。

网站下拉界面的实现

标签：js   css   html   .net   

原文地址：http://blog.csdn.net/zhangzijiejiayou/article/details/42214073