导读：在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界面，不想看到一些很死板的东西。
加油！！！
