在網站的世界裏，菜單是不可或缺的元素。菜單的作用主要是告訴用戶網站的基本功能，引導用戶完成一系列的功能操作。一個簡潔明快的菜單，可以讓用戶很快接受並最終認可；相反，複雜無序的菜單隻會讓用戶陷入迷茫，甚至因此被用戶拋棄。
做網頁設計，包括菜單的設計，都會用到一些基本的網頁製作工具。以菜單爲例，本文以下面兩種形式實現菜單：
1.div + css + javascript
2.div + css + jQuery
這兩種形式的主要區別是在實現菜單欄目點擊響應時，分別採用了javascript和jQuery。
爲突出重點，這裏只列舉核心代碼。首先是菜單的html代碼，如下：
<body onload="init()"> <!--菜單--> <div class="menu" id="menu"> <ul> <li class="level1"> <a href="#">賬戶管理</a> <ul> <li><a href="#">密碼修改</a></li> <li><a href="#">信息修改</a></li> </ul> </li> <li class="level1"> <a href="#">文章管理</a> <ul> <li><a href="#">博文管理</a></li> <li><a href="#">隨筆管理</a></li> </ul> </li> <li class="level1"><a href="#">興趣設置</a> </li> </ul> </div> </body>
用javascript實現菜單點擊的代碼如下：
<script language="javascript">
function init()
{
var obj = document.getElementById("menu");
var nodes = obj.children[0].children;
for(var i = 0; i < nodes.length; ++i){
var node = nodes[i].children[0];
if(node.tagName === "A"){
if(nodes[i].children.length > 1){
var tag = nodes[i].children[1];
node.onclick = function(tag)
{
return function(){
if(tag.style.display === "block")
refresh();
else {
refresh();
tag.style.display = "block";
}
}
}(tag);
}
}
}
}
function refresh()
{
var obj = document.getElementById("menu");
var nodes = obj.children[0].children;
var i;
for(i = 0; i < nodes.length; ++i) {
var temp = nodes[i].children[1];
if(temp && temp.tagName === "UL")
temp.style.display = "none";
}
}
</script>用jQuery實現點擊一級菜單時二級菜單的收縮
<script language="javascript">
function init()
{
$(".level1 > a").click(function(){
$(this).next().show().parent().siblings().children("a").next().hide();
});
}
</script>以上兩種手段比較，不難發現，相比javascript複雜的邏輯實現，使用jQuery實現菜單的點擊更爲簡潔有效。
附1：菜單點擊效果圖：
附2：菜單css樣式代碼：
{
text-decoration:none;
}
ul, li
{
list-style-type:none;
margin:0px;
padding:0px;
}
.menu
{
width:150px;
}
.menu ul
{
border-width:0px 1px 1px;
border-style:solid;
border-color:#C4D5DF;
}
.menu ul li a
{
display:block;
height:28px;
line-height:28px;
background:#EBF3F8;
font-size:12px;
color:#5893B7;
text-indent:14px;
border-top:1px solid #C4D5DF;
}
.menu ul li a:hover
{
color:#bd0a01;
text-decoration:underline;
}
.menu ul li ul
{
display:none;
border:0px solid;
}
.menu ul li ul li a
{
background:#FFFFFF;
text-indent:28px;
}
.menu ul li ul li a:hover
{
color:green;
}