【JavaScript 11—应用总结】：下拉菜单

导读：在web页面的显示中，总是免不了下拉菜单的设置。怎样将菜单设置的更好玩一点呢？这次，就将实现一个下拉菜单的制作。当鼠标移入的时候，菜单显示，鼠标移走，菜单关闭。

 

一、实现分析

首先，制作一个下拉菜单，需要通过CSS先构建出一个菜单的基本样式，包括它的边框、显示文字、图片、图标等。这些都是通过CSS设置好。

其次，写入一个鼠标移入移出的方法，当鼠标移入的时候，菜单显示（方法）；当鼠标移走的时候，菜单隐藏（方法）。

然后，需要写入一个对于Id、class等的获取方法，方便我们快速的从div中获取到我们需要的东西，从而利用鼠标的移入移出进行菜单的设置。

最后，还可以加上一个CSS的添加方法，比如说在这里，可以通过CSS的添加方法，将个人中心的背景小图标设置一下。当下拉菜单显示时，三角向下；反之则向上。

备注：准备自己喜欢的图标，比如在这里，我选择的未选中时的小锁，和选中时的小圆圈。

附：效果图

 

二、具体实现

2.1，HTML编写（主要）

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">	<div id="header">
		<div class="logo"><img src="Imageblog.gif" alt="" /></div>
		<div class="member" >个人中心
			<ul >
				<li><a href="###">设置</a></li>
				<li><a href="###">换肤</a></li>
				<li><a href="###">帮助</a></li>
				<li><a href="###">退出</a></li>
			</ul>
		</div>
	
	</div></span></span>

注：这里用到的主要是个人中心的div下面的东西，上一个则是整体的一个logo显示，这里不予以说明。

 

2.2，CSS样式（主要）

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">/* 设置下拉菜单的位置 */
ul{
	padding:0;
	margin:0;
}

/* 去掉前面的小圆点 */
ul li{
	list-style-type:none;
}

/* 设置个人中心的样式 */
#header .member{
	width:110px;
	height:38px;
	float:right;
	background: url(Imagedown.png)no-repeat 80px center;/* 右边的小图标 */
	line-height:38px ;
	cursor:pointer;/* 当鼠标移入时，小手图标 */
	color:red;
	position:relative;/* 设置相对位置*/
} 

/* 设置下拉菜单的边框样式 */
 #header  ul{
	position:absolute;
	right:0px;
	background:#FBF7E1;
	width:110px;
	height:120px;
	border:2px solid gray;
	border-top:none;
	padding:3px 0 0 0;
	float:right;
	display:none;/* 不显示下拉菜单 */
} 

/* 设置菜单文字样式 */
#header ul li{
	height:30px;
	line-height:30px;
	text-indent:25px;
	letter-spacing:1px;
}

/* 设置超链接显示样式 */
#header ul li a{
	text-decoration:none;
	color:#333;
	display:block;
	background:url(Image2.png) no-repeat left center;
} 

/* 设置超链接移入样式 */
 #header ul li a:hover{
	background:#fc0 url(Image3.png) no-repeat left center;
} </span></span>

 

2.3，鼠标移入移出

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">//设置鼠标移入移出事件
Base.prototype.hover=function(over,out){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].onmouseover=over;
		this.elements[i].onmouseout=out;
	}
	return this;
}

//设置显示
Base.prototype.show=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="block";
	}
	return this;
}

//设置隐藏
Base.prototype.hide=function(){
	for(var i=0;i<this.elements.length;i++){
		this.elements[i].style.display="none";
	}
	return this;
}</span></span>

 

 

 

2.4，添加CSS方法

 

获取节点的操作，在前面已经通过连缀的时候说过了，这里就不说了。这里添加一个CSS方法，这样我们就可以直接在用的时候添加一些简单的CSS设置，而不用去到CSS文件中修改了。（对于一些简单的操作）

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">Base.prototype.css=function(attr,value){
	for(var i=0;i<this.elements.length;i++){
		if(arguments.length==0){
			if(typeof window.getComputedStyle !="undefined"){
				return window.getComputedStyle(this.elements[i],null)[attr];
			}else if(typeof this.elements[i].currentStyle !="undefined"){
				return this.element[i].currentStyle[attr];
			}
		}
		this.elements[i].style[attr]=value;
	};
	return this;
}</span></span>

 

 

 

2.5，整合调用

 

 

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">window.onload=function(){
	//个人中心——下拉菜单
  $().getClass("member").hover(function(){//hover鼠标移入移出事件
		//窗体加载，个人中心的图标向下
		$(this).css("background","url(Imagedown.png)no-repeat 80px center");
		//获取下拉菜单，显示
		$().getTagName("ul").show();
  },function(){
		//鼠标移走，图标向上
		$(this).css("background","url(Imageup.png)no-repeat 80px center"); 
		//隐藏下拉菜单
		$().getTagName("ul").hide();
  });
};
</span></span>

这样，一个下拉菜单就做完了。将超链接里的东西，改成自己做好的网址链接，就可以实现菜单导航了。嘿嘿！

 

 

三、总结感受

其实这个很简单的，但是简单也要去做才好，JS的这些东西，感觉都是一步一步深化的，丢了一步都做不好。这个视频讲了好多怎样将前台页面变得漂亮的东西，我很喜欢。我以后想要做出很好看，很有动感的Web界面，不想看到一些很死板的东西。

加油！！！