在网站的世界里，菜单是不可或缺的元素。菜单的作用主要是告诉用户网站的基本功能，引导用户完成一系列的功能操作。一个简洁明快的菜单，可以让用户很快接受并最终认可；相反，复杂无序的菜单只会让用户陷入迷茫，甚至因此被用户抛弃。

做网页设计，包括菜单的设计，都会用到一些基本的网页制作工具。以菜单为例，本文以下面两种形式实现菜单：

1.div + css+ javascript

2.div + css+ jQuery

这两种形式的主要区别是在实现菜单栏目点击响应时，分别采用了javascript和jQuery。

为突出重点，这里只列举核心代码。首先是菜单的html代码，如下：

<bodyonload="init()"><!--菜单--><divclass="menu"id="menu"><ul><liclass="level1"><ahref="#">账户管理</a><ul><li><ahref="#">密码修改</a></li><li><ahref="#">信息修改</a></li></ul></li><liclass="level1"><ahref="#">文章管理</a><ul><li><ahref="#">博文管理</a></li><li><ahref="#">随笔管理</a></li></ul></li><liclass="level1"><ahref="#">兴趣设置</a></li></ul></div></body>

用javascript实现菜单点击的代码如下：

<scriptlanguage="javascript">functioninit(){varobj=document.getElementById("menu");varnodes=obj.children[0].children;for(vari=0;i<nodes.length;++i){varnode=nodes[i].children[0];if(node.tagName==="A"){if(nodes[i].children.length>1){vartag=nodes[i].children[1];node.onclick=function(tag){returnfunction(){if(tag.style.display==="block")refresh();else{refresh();tag.style.display="block";}}}(tag);}}}}functionrefresh(){varobj=document.getElementById("menu");varnodes=obj.children[0].children;vari;for(i=0;i<nodes.length;++i){vartemp=nodes[i].children[1];if(temp&&temp.tagName==="UL")temp.style.display="none";}}</script>

用jQuery实现点击一级菜单时二级菜单的收缩

<scriptlanguage="javascript">functioninit(){$(".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;}.menuul{border-width:0px1px1px;border-style:solid;border-color:#C4D5DF;}.menuullia{display:block;height:28px;line-height:28px;background:#EBF3F8;font-size:12px;color:#5893B7;text-indent:14px;border-top:1pxsolid#C4D5DF;}.menuullia:hover{color:#bd0a01;text-decoration:underline;}.menuulliul{display:none;border:0pxsolid;}.menuulliullia{background:#FFFFFF;text-indent:28px;}.menuulliullia:hover{color:green;}