joquery(纵向横向菜单)小结.docxVIP

JQuery(纵向横向菜单)小结2010/11/24说明：此次小结是为了展示JQuery实现菜单的效果。文件清单：menu.jsp 菜单JSP页面jquery.jsJQuery源文件JSmenu.js菜单使用的JSstyle.css菜单样式文件menu.jsp源文件，如下：%@pagelanguage=javaimport=java.util.*pageEncoding=utf-8%!DOCTYPEHTMLPUBLIC-//W3C//DTD HTML 4.01 Transitional//ENhtmlheadtitleJQuery[菜单效果]/titlelinkrel=stylesheettype=text/csshref=style.css/scripttype=text/javascriptsrc=jquery.js/scriptscripttype=text/javascriptsrc=menu.js/script/headbodyulliclass=mainMenuahref=#机构管理/aulliahref=#添加机构/a/liliahref=#修改机构/a/liliahref=#查询机构/a/li/ul/liliclass=mainMenuahref=#部门管理/aulliahref=#添加部门/a/liliahref=#修改部门/a/liliahref=#查询部门/a/li/ul/liliclass=mainMenuahref=#员工管理/aulliahref=#添加员工/a/liliahref=#修改员工/a/liliahref=#查询员工/a/li/ul/li/ulbr/hr/br/ulliclass=crossMenuahref=#机构管理/aulliahref=#添加机构/a/liliahref=#修改机构/a/liliahref=#查询机构/a/li/ul/liliclass=crossMenuahref=#部门管理/aulliahref=#添加部门/a/liliahref=#修改部门/a/liliahref=#查询部门/a/li/ul/liliclass=crossMenuahref=#员工管理/aulliahref=#添加员工/a/liliahref=#修改员工/a/liliahref=#查询员工/a/li/ul/li/ul/body/htmlstyle.css样式源文件，如下：/*菜单样式：2010-11-24*/UL,LI{/*去掉小圆点*/list-style:none;}UL{/*清除子菜单缩进*/padding:0;/*但IE浏览器不能缩进*/margin:0;}/*主菜单样式*/.mainMenu,.crossMenu{/*字体大小*/font-size:12px;/*添加背景图片*/background-image:url(../../resources/images/title.gif);/*背景图横向重复*/background-repeat:repeat-x;/*主菜单宽度*/width:70px;}/*子菜单样式*/LI{/*背景色*/background-color:#EEEEEE;}A{/*取消链接的下划线*/text-decoration:none;/*子菜单缩进*/padding-left:15px;/*让连接充满区域，及菜单边缘也可以点击*问题：如果值为block,IE会出现问题，*不能填充，且子菜单会变样，因此我们*用inline解决，但是不能解决填充，*因此加上宽度(70 - 15)*/display:block;display:inline;width:70px;/*在所有的链接加3个像素的上边距和下边距*/padding-top:3px;padding-bottom:3px;}.mainMenu A,.crossMenu A{/*主菜单链接为白色*/color:white;/*链接背景图片*/background-image:url(../../resources/images/collapsed.gif);/*背景图不重复*/background-repeat:no-repeat;/*背景箭头的位置*/background-position:2pxcenter;}.mainMenu LI A,.crossMenu LI A{/*子菜单链接文字为黑色*/color:black;/*去掉子菜单背景箭头*/background-image:none;}/*主菜单下的UL全部隐藏*/.mainMenu UL,.crossMenu UL{display:none;}/*横向菜单*/.crossMenu{/*横向排列*/float:left;/*字体大小*/font-s