在网站的世界里,菜单是不可或缺的元素。菜单的作用主要是告诉用户网站的基本功能,引导用户完成一系列的功能操作。一个简洁明快的菜单,可以让用户很快接受并最终认可;相反,复杂无序的菜单只会让用户陷入迷茫,甚至因此被用户抛弃。
做网页设计,包括菜单的设计,都会用到一些基本的网页制作工具。以菜单为例,本文以下面两种形式实现菜单:
1.div + css + javascript
2.div + css + jQuery
这两种形式的主要区别是在实现菜单栏目点击响应时,分别采用了javascript和jQuery。
为突出重点,这里只列举核心代码。首先是菜单的html代码,如下:
<body > <!--菜单--> <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; }
时间: 2024-10-24 12:29:17