利用jQuery设计横/纵向菜单

浏览数：46 / 时间：2015年06月09日

在网页中，菜单扮演着“指路者”的角色。如何设计一个人性化的菜单呢，下面小编带着大家一起做。

效果图：

设计历程：

1.首先利用html中的<ul>和<li>标签进行嵌套，搭起一个整体的框架。如下图所示：

Html代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横纵向菜单</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>

<body>
<body>
	<ul>
    	<li class="main">
        	<a href="#">菜单项1</a>
            <ul>
            	<li>
                	<a href="#">子菜单项11</a>
                </li>
                <li>
                	<a href="#">子菜单项12</a>
                </li>
            </ul>
        </li>
        <li class="main">
        	<a href="#">菜单项2</a>
            <ul>
            	<li>
                	<a href="#">子菜单项21</a>
                </li>
                <li>
                	<a href="#">子菜单项22</a>
                </li>
            </ul>
        </li>
        <li class="main">
        	<a href="#">菜单项3</a>
            <ul>
            	<li>
                	<a href="#">子菜单项31</a>
                </li>
                <li>
                	<a href="#">子菜单项32</a>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

（这是展示的是纵向菜单的代码，横向代码亦是如此，只需更改一下class的名字，以便在设计样式时区别开。）

2.上面的两幅图形成鲜明的对比，用户理所应当选择前者了，接下来我们就给框架“穿”件衣服。

CSS代码：

ul,li{
	/*清除ul和li前默认的小圆点*/
	list-style:none;
	}
ul{
	/*清除子菜单的缩进值*/
	padding:0;
	margin:0;
	}
.main,.hmain{
/*	菜单项的背景是一小块图片平移重复构成的，看起来有立体感
*/	background-image:url(../image/title.gif);
	background-repeat:repeat-x;	
	width:120px;
	}
li{
/*	设置背景颜色，菜单项的背景图片覆盖背景颜色
*/	background-color:#CCC;	
	}
a{
	/*取消所有链接的下划线*/
	text-decoration:none;	
/*	让a充满整个区域，鼠标点击的那行一直是手形
*/	display:block;
	display:inline-block;
	
	width:100px;
	padding-left:20px;
	padding-top:3px;
	padding-bottom:3px;
	}	
.main a,.hmain a{
/*	设置菜单项的字体颜色
*/	color:white;
/*在菜单项前添加向右指的图片
*/	background-image:url(../image/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
	}
.main li a,.hmain li a{
/*	设置子菜单的字体颜色
*/	color:black;
	background-image:none;
	}
.main ul,.hmain ul{
/*	初始不显示子菜单项
*/	display:none;
	}
.hmain{
/*	横向菜单每个菜单项向左浮动，在一行显示
*/	float:left;
	margin-right:1px;		
	}*/

注：“main”—纵向 “hmain”—横向

3.菜单的表面工作完成了，它不是摆在那里给人看的，需要和用户进行交互，实现一些动态效果。当我们点击菜单项时，首先鼠标箭头变为手形，点击后下面隐藏的子菜单项会显示出来，同时指向右的箭头变为指向下方。再点击菜单项时，子菜单项隐藏，同时更换箭头图片。

javascript就是赋予网页生命力的大神，而jQuery则是一个兼容多浏览器的javascript库，有了它使得javascript写得更少,做得更多。引用了jQuery库后，编写如下代码：

javascript代码：

$(document).ready(function() {
    //纵向菜单
	$(".main > a").click(function(){		
		var ulNode=$(this).next("ul");		
		ulNode.slideToggle();
		changeIcon($(this));
	});
	//横向菜单
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
	    changeIcon($(this).children("a"));
	});
});
/*修改主菜单的指示图标*/
function changeIcon(mainNode){
	if(mainNode){
		if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){
		   mainNode.css("background-image","url('image/expanded.gif')");
	    }else{
		   mainNode.css("background-image","url('image/collapsed.gif')");
		}
	}
}

至此，两个菜单设计完成了，是不是很有成就感呢！