纵向横向菜单小结

《纵向横向菜单小结》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、JQuery(纵向横向菜单)小结2010/11/24说明：此次小结是为了展示JQuery实现菜单的效果。文件清单：menu.jsp----菜单JSP页面jquery.js----JQuery源文件JSmenu.js----菜单使用的JSstyle.css----菜单样式文件menu.jsp源文件，如下：<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>

2、l>

机构管理
• 添加机构

  3、>

• 修改机构
• 查询机构
部门管理
• 添加部门
• 修改部门
• 查询部门
员工管理
• 添加员工

  4、li>

• 修改员工
• 查询员工

机构管理
• 添加机构
• 修改机构
• 查询机构
部门管理

5、i>添加部门

• 修改部门
• 查询部门
员工管理
• 添加员工
• 修改员工
• 查询员工

6、0-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

7、{/*背景色*/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;paddin

8、g-bottom:3px;}.mainMenuA,.crossMenuA{/*主菜单链接为白色*/color:white;