jQuery实现横向纵向下拉菜单

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

学习javascript中有提到构建自己的javascript库，比如jQuery，这些库中包含自己常用的方便的小函数，这些函数可以让自己的代码更加清晰易懂，而且当别人调用时也很容易理解，当然编写库时需要注意一些问题，比如大小写、括号引号、换行等，这些为jQuery学习提供了一些基础，jQuery的学习主要通过几个实例来了解jQuery的应用，通过查看API运用特定方法实现自己的效果，它让网页动了起来。通过代码如何实现一个横向和纵向下拉菜单的效果。

首先在HTML中通过ul和li表示页面中的菜单项，然后添加对css和js文件的引用，注意js引用时要先引用jQuery.js然后再是自己编写的js文件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      <title>实战三：菜单效果</title>

	 <link type="text/css" rel="stylesheet"  href="css/menu.css"/>
	
         <script type="text/javascript" src="js/jquery.js"></script>
	 <script type="text/javascript" src="js/menu.js"></script>
</head>
<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>
  <br />
  <br />
  <br />
  <ul>
      <li class="hmain">
	     <a href="#"> 菜单1</a>
		  <ul>
		       <li><a href="#">子菜单11</a></li>
		      <li><a href="#">子菜单12</a></li>
		  </ul>
	  </li>
	  <li class="hmain">
	      <a href="#"> 菜单2</a>
		   <ul>
		       <li><a href="#">子菜单21</a></li>
		       <li><a href="#">子菜单22</a></li>
		  </ul>
	  </li>
	  <li class="hmain">
	      <a href="#">菜单3</a>
		  <ul>
		       <li><a href="#">子菜单31</a></li>
		       <li><a href="#">子菜单32</a></li>
		  </ul>
	  </li>
  </ul>
</body>
</html>

CSS部分：

ul,li{
    /*清除菜单项小圆点*/
   list-style: none;
}
ul{
   /*清除子菜单的缩进值*/
   padding:0;
   margin:0;
}
.main,.hmain{
   background-image:url(../images/title.gif);
   background-repeat:repeat-x;
   width:120px;
}
li{
  background-color:#CCCCCC;
}
a{
   /*取消所有的下划线*/
   text-decoration:none;
   padding-left:20px;
   display:bloock;
   display:inline-block;
   width:100px;
   padding-top:3px;
   padding-bottom:3px;
}
.main a,.hmain a{
    color:#FFFFFF;
	background-image:url(../images/collapsed.gif);
	background-repeat:no-repeat;
	background-position:3px center;
}
.main li a,.hmain li a{
    color:#000000;
	background-image:none;
}
.main ul,.hmain ul{
   display:none;
}
.hmain{
   float:left;
   margin-right:1px;
}

menu.js部分：

//纵向菜单点击实现下拉
$(document).ready(function(){
    $(".main>a").click(function(){
  //找到主菜单对应的子菜单项
	 var ulNode=$(this).next("ul");
	 /*if(ulNode.css("display")==""){
		ulNode.css("display","block");      
		changeIcon($(this));
	 }else{
		ulNode.css("display","none");
	        changeIcon($(this));
	}*/
	   ulNode.slideToggle();//slideToggle方法和toggle类似（直接让显示的元素隐藏，隐藏元素显示）
	   changeIcon($(this));
					
	});


//横向菜单鼠标经过实现下拉（向下或向上卷动效果）
$(".hmain").hover(function(){
       $(this).children("ul").slideDown();
	changeIcon($(this).children("a"));
				<span style="font-family: SimSun;">},function(){</span>

				  $(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('images/expanded.gif')");
		}else{
		mainNode.css("background-image","url('images/collapsed.gif')");	
		}
			
	}
}

效果图：

技术分享