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

时间:2022-09-05 10:32:54

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


一、实现分析

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

其次,写入一个鼠标移入移出的方法,当鼠标移入的时候,菜单显示(方法);当鼠标移走的时候,菜单隐藏(方法)。

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

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

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

附:效果图

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


二、具体实现

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

加油!!!