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')");
}
}
}