您的位置：首页 > Web前端 > JQuery

JQuery-纵向菜单及横向菜单

2010-09-11 21:33 330 查看

Menu.aspx代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Menu.aspx.cs" Inherits="Web.Three.Menu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery实践-菜单效果</title>
<link href="../CSS/menu.css" rel="Stylesheet" type="text/css" />

<script src="../JavaScript/jquery-1.2.6-intellisense.js" type="text/javascript"></script>

<script src="../JavaScript/menu.js" type="text/javascript"></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>
</html>

menu.css代码如下:

ul,ui
{
/*清除ul和li上默认的小圆点*/
list-style:none;
}
ul
{
/*清除子菜单的缩进值*/
padding:0;

margin:0;
}
.main,.hmain
{
background-image:url(../image/menu.jpg);
background-repeat:repeat-x;
width:120px;
}
li
{
background-color:#eeeeee;
}
a
{
text-decoration:none;
padding-left :20px;
display:inline-block;
width:100px;
padding-top:1px;
padding-bottom:1px;

}
.main a, .hmain a
{
color:White ;
background-image:url(../image/closed.gif);
background-repeat:no-repeat ;
background-position :1px center;
}
.main li a,.hmain li a
{
color:Black ;
background-image:none;
}
.main ul,.hmain ul
{
display:none ;
}
.hmain
{
float :left ;
margin-right:1px;
}

menu.js代码如下:

$(document ).ready(function(){
//页面中的DOM已经闭幕完成时，执行的代码
$(".main >a ,.hmain >a").click(function(){
//找到主菜单单项对应的子菜单项
var ulNode = $(this).next("ul");
/*
if(ulNode .css("display") == "none"){
ulNode .css("display","block");

}else
{
ulNode .css("display","none");
}
*/

/* ulNode .toggle();*/
ulNode .slideToggle();
changeIcon ($(this) );
});

$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon ($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon ($(this).children("a"));
});
});

/**
*修改主菜单的指示图标
*closed.gif 是未展开的图片，expanded.gif是展开的图片
*/
function changeIcon(mainNode){
if(mainNode ){
if(mainNode .css("background-image").indexOf("colsed.gif") >=0){
mainNode .css("background-image","url('../image/expanded.gif')");
}else {
mainNode .css("background-image","url('../image/colsed.gif')");
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航