jQuery实现横向纵向下拉菜单

页面导航:首页 > 网络编程 > JavaScript > jQuery实现横向纵向下拉菜单

jQuery实现横向纵向下拉菜单

来源: 作者: 时间:2016-02-03 09:20 【

学习javascript中有提到构建自己的javascript库,比如jQuery,这些库中包含自己常用的方便的小函数,这些函数可以让自己的代码更加清晰易懂,而且当别人调用时也很容易理解,当然编写

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

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



      
      实战三:菜单效果

	 
	
         <script type="text/javascript" src="js/jquery.js"></script>
	 <script type="text/javascript" src="js/menu.js"></script>



  



部分:

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

效果图:


这个阶段的学习也是要多动手,学会查看文档,掌握了方法,一些效果的实现都大同小异,要不然自己的学习很是单薄,多一份钻研,做一份积累。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<