`
流星剑
  • 浏览: 92103 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery实战之横纵菜单特效

    博客分类：
  • js
jQueryCSSJavaScript 
阅读更多

以下为html代码

<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>
    <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 />
    <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>

 

css代码如下

ul li/*清楚原点*/
{
	list-style:none;
}
ul/*清楚缩进*/
{
	padding:0px;
	margin:0px;
}
.main,.hmain{
	background-image:url(../images/title.gif);
	background-repeat:repeat-x;
	width:120px;
}
li{ background-color:#eeeeee; }/*背景图片会覆盖背景图片*/
a{ text-decoration:none;/*取消所有下划线*/
padding-left:20px;
display:block;
display:inline-block;/*兼容ie6*/
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a,.hmain a{
	color:#FFF; 
	background-image:url(../images/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;}

 以下是jquery代码

$(document).ready(function(){
/*页面dom装载完成执行的代码*/	
	$(".main > a").click(function(){
		/*找到主菜单项下的子菜单项*/		
		var ulNode=$(this).next("ul");		
		/*判断是否展开*/	
		/*if(ulNode.css("display")=="none")
		{
			ulNode.css("display","block");
			}
			else{
				ulNode.css("display","none");
				}*/
	/*另一种显示和隐藏的方法*/
				//ulNode.show(500);
				//ulNode.show("slow");//normal fast
				//ulNode.hide();
				//ulNode.toggle();//自动显示和隐藏
				//ulNode.slideDown("normal");//动态卷入
				//ulNode.slideUp();//
				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('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

 并且提供源码下载

分享到：
| 倒计时关闭窗口
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics