【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界面，不想看到一些很死板的东西。

加油！！！