实战Jquery(三)--横向纵向菜单

来源：互联网发布：云浮网络巡警大队编辑：程序博客网时间：2024/05/09 09:53

每天一个实例看来速率有点低了,今天要多做一点.好了,这次实现的是一个简单的菜单,Web项目中常见的菜单有两种:纵向和横向.从纵向说起,看一下最初的代码.

html代码实现最基本的菜单与子菜单

<span style="font-size:18px;"><!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><meta http-equiv="content-type" content="text/html;charset=gb2312" /><title>实战-菜单效果</title><meta http-equiv-"Content-Type" content="text/html;charset-UTF-8" /><link type="text/css" rel="stylesheet" href="menu.css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="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></body></html></span>

用<ul>和<li>标签创建的是带有项目符号的列表.,所以接下来我们还要通过CSS设置去除部分样式,以及设置菜单与子菜单不同的背景色或背景图,文字格式等.

<span style="font-size:18px;">ul li{/*消除ul和li上默认的小圆点*/list-style:none;}ul{/*清除子菜单的缩进值*/padding:0;}.main{background-image:url(images/title.gif);background-repeat:repeat-x;width:120px;}li{background-color:#EEEEEE;}a{/*取消所有的下划线*/text-decoration:none;padding-left:20px;display:block;display:inline-block;width:100px;padding-top:3;padding-bottom:3;}.main a{color:white;background-image:url(images/collapsed.gif);background-repeat:no-repeat;background-psition:3px center;}.main li a{color:black;background-image:none;}.main ul{display:none;}</span>

最后js实现主菜单单击显示或隐藏子菜单.

<span style="font-size:18px;">$(document).ready(function(){//给主菜单注册click事件,点击时显示被隐藏的子菜单项$(".main > a").click(function(){//找到主菜单项对应的子菜单项var ulNode=$(this).next("ul");if (ulNode.css("display")=="none"){ulNode.css("display","block");}else{ulNode.css("display","none");}    });})</span>

一个基本的纵向菜单就算完成了.看一下Web页面的效果.

细心的朋友一定发现了菜单展开状态下的图标是不一样的,而上面js中并没有相关函数的实现代码.是的,这是因为我在实现横向菜单设计后(包括图标变化的改进)又在原来代码中添加了一句:changeIcon($(this));关于这个函数的实现在后面的横向菜单中展示.

横向菜单:

html代码基本一样,这里写在一个文件中,故只改了class="hmain". 而CSS代码也基本一致,只是对其中公共的部分加入".hmain",所有的样式即应用到该类标签下.所以,从纵向菜单到横向菜单的修改,只是分分钟的事!

上面提到的那个改变图标的功能在下面的js中:

$(document).ready(function(){//横向菜单//当鼠标滑过时,显示或隐藏子菜单项,并改变主菜单图标$(".hmain").hover(function(){    $(this).children("ul").slideDown();changeIcon($(this).children("a"));},function(){$(this).children("ul").slideUp();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')");}}}

所谓的横向菜单就是这个样子滴:

下面我总结了一下主要用到的技术.

构建多层菜单可以通过ul和li嵌套来实现,li是有缩进的.做Web开发一定要尽力使自己写的页面在各个浏览器都正常显示,这个过程最头疼就是IE,比如清除子菜单的缩进,只有padding和margin都为0的时候才可以在IE6和7中正常显示.除此之外,IE6以外的浏览器都可以通过设定display的值为block来让a元素充满所在的区域.只有IE6需要设定display为inline-black并设定a的宽度.另外一点就是如果一个元素上同时定义了背景图和背景色,那么浏览器会选择使用哪一个?答案是背景图.

上面的js代码通过if语句判断,如果子菜单隐藏则单击主菜单时显示,如果显示则单击时隐藏.不知道朋友是否还记得jQuery的宗旨:write less, do more.所以,我们可以用这样一句话来代替上面的N行代码:ulNode.slideToggle(); toggle方法的强大之处在于,它省去了我们判断元素是显示还是隐藏的状态,直接让显示的隐藏,隐藏的显示.

jQuery的学习还在继续,一路走,一路收获.

0 0