橫縱向的菜單效果，點擊縱向菜單顯示其子菜單。鼠標指向橫菜單的時候。顯示其子菜單，鼠標離開，子菜單隱藏。
HTML代碼：
<span style="font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橫縱向的菜單</title>
<link href="css/menu.css" rel="stylesheet" />
<script src="js/JQuery.js"></script>
<script 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 />
<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>
</span>CSS代碼：
<span style="font-size:18px;">body {
}
ul,li{
/*清除菜單前面的點和圈*/
list-style:none;
}
ul {
padding:0;
margin:0;
}
.main ,.hmain {
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:100px;
}
li{
background-color:#999;
}
a{
/*取消全部的下劃線*/
text-decoration:none;
padding-left:15px;
display:block ; /*讓a標簽充滿這個區域*/
/*針對IE6*/
display:inline-block;
width:85px;
padding-top:3px;
padding-bottom:3px;
}
.main a , .hmain a{
color:white;
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-left:1px;
}</span><span style="font-size:18px;">$(function () {
$(".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.show("normal");//slow, fast, 500
//ulNode.hide();
//ulNode.toggle();//顯示和隱藏。自己主動推斷
//ulNode.slideDown("slow");//顯示
//ulNode.slideUp();//隱藏
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function () {
$(this).children("ul").show("fast");
changeIcon($(this).children("a"));
}, function () {
$(this).children("ul").hide("fast");
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)");
}
}
}</span>1.HTML總結：
1.頁面中的菜單項能夠通過嵌套ul和li來表示
2.CSS總結：
1.list-style屬性為none時能夠清除ul和li前面的小圓點
2.能夠使用background-repeat來控制背景圖的反復填充方式
3. text-decoration屬性值為none時，能夠取消文字上的下劃線
4,.display的值為none能夠用於隱藏元素
3.JQuery總結：
1. .main a 和 .main >a不同之處是。前者選擇使用了.main的這個class的元素內部的全部的a節點，後者僅僅選擇了.main的子節點中的a節點
2. show，hide方法能夠用於顯示或隱藏元素，。沒有參數時的效果和改動CSS的display屬性效果一樣。
參數能夠是單位為毫秒的數字。或者是‘slow’。‘normal’，‘fast’這三個文字都能夠來控制完畢顯示或隱藏須要的時間。
3.toggle方法更為強大，能夠省去推斷元素是顯示還是隱藏的狀態。能夠讓顯示的元素隱藏起來，能夠讓隱藏的元素顯示出來，參數用法和show，hide同樣。