JQuery学习之JQ下拉菜单

2011年07月21日 作者：zenoven
阅读：19,898 12评论
GD Star Rating
loading...

JQuery相信大家都接触过了，不过我这个JS菜鸟最近才开始学习。

以前一直要搞个下拉菜单，现在学了点JQ，发现也挺简单的，上代码！(Demo页面)

HTML代码

<ul id="nav-categories">
	<li><a href="../">首页</a>
	</li>
	<li>
		<a href="#">链接</a>
		<ul>
			<li><a href="#">aaa</a></li>
			<li><a href="#">bbb</a></li>
			<li><a href="#">ccc</a></li>
			<li><a href="#">ddd</a></li>
		</ul>
	</li>
	<li>
		<a href="#">相册</a>
		<ul>
			<li><a href="#">11</a></li>
			<li><a href="#">22</a></li>
			<li><a href="#">33</a></li>
			<li><a href="#">44</a></li>
		</ul>
	</li>
	<li>
		<a href="#">博客</a>
		<ul>
			<li><a href="#">AA</a></li>
			<li><a href="#">BB</a></li>
			<li><a href="#">CC</a></li>
			<li><a href="#">DD</a></li>
		</ul>
	</li>
	<li>
		<a href="#">关于</a>
	</li>
</ul>

JQuery代码

//两个参数，一个导航ul标签的id，一个是下拉菜单的显示速度，越小越快
function zvMenu(ulElementId,speed){
	//JQ一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
	$("#"+ulElementId).children("li:has(ul)").hover(
		function(){
			$(this).find("ul>li:last").addClass("li-last-s1");//给每个下拉菜单的最后一个li元素添加css样式，此处非必要
			$(this).children("ul").slideDown(speed);//JQ的slideDown方法，显示下拉菜单
		},
		function(){
			$(this).children("ul").hide();//隐藏下拉菜单
		}
	);
	//JQ动画，可选
	$("#"+ulElementId).find("li>ul>li>a").hover(
		function(){
			$(this).animate({paddingLeft:"30px"},speed);
		},
		function(){
			$(this).animate({paddingLeft:"20px"},speed);
		}
	);

}

CSS代码

#nav-categories{float:left;font-size:18px;height:50px;line-height:50px;}
#nav-categories li{float:left;padding:0 20px 0 20px;background:#444;position:relative;}
#nav-categories li ul{display:none;background:#444;color:#fff;position:absolute;left:0;top:50px;width:120px;border:1px solid #990;border-top:none;}
#nav-categories li a{color:#FFF;}
#nav-categories li a:hover{color:#9C0;}
#nav-categories li ul li{height:40px;line-height:30px;background:#444;width:116px;padding:0;margin:0;border:2px solid #9C0;border-top:none;border-bottom:none;}
#nav-categories li ul li.li-last-s1{border-bottom:2px solid #9C0;}
#nav-categories li ul li a{display:block;padding:5px 5px 5px 20px;zoom:1;}
#nav-categories li ul li a:hover{background:#575855;}
分类 :  JS , 技术
标签 :  , , ,

本文短网址： http://znv.cc/2l

本文链接地址：https://www.zenoven.com/technology/js/2011071547.html

已有12条评论 发表评论

  1. 蚊子 /

    我启用wp postviews后JQ冲突，二级页面的特效都显示不出来，烦死。。

    GD Star Rating
    loading...
    回复
  2. yeohcooller /

    下拉菜单有了。需要的时候来。

    GD Star Rating
    loading...
    回复
  3. 皇家元林 /

    有空试试你的代码，有一段时间为了这个下拉菜单，搞得头疼

    GD Star Rating
    loading...
    回复
    1. 自由人 / 本文作者

      呵呵 我也是没事了学学JQ

      GD Star Rating
      loading...
      回复
  4. 26kg /

    :(6): 我比你更菜~~ :(5):

    GD Star Rating
    loading...
    回复
  5. mice /

    为什么不用jQuery自带的$(document).ready(function(){
    而自己写个
    function addLoadEvent
    个人感觉多此一举.. :(3):

    GD Star Rating
    loading...
    回复
    1. 自由人 / 本文作者

      addLoadEvent在这里是没有用到的，那个function是以前弄的，呵呵

      GD Star Rating
      loading...
      回复
      1. mice /

        :(8): 忘记看js/load.js了…

        GD Star Rating
        loading...
        回复
  6. 权子 /

    坐个沙发~~~
    演示有点简单哦~~~

    GD Star Rating
    loading...
    回复
    1. 自由人 / 本文作者

      嗯嗯，我的JS还是很菜的，所以就 :(23):

      GD Star Rating
      loading...
      回复
  7. 站长实验室 /

    JQuery的下拉菜单，调用JQuery库，很不错的

    GD Star Rating
    loading...
    回复
    1. 自由人 / 本文作者

      呵呵，没事学学JQ还是很有必要的

      GD Star Rating
      loading...
      回复

发表评论