Jquery系列之横向纵向菜单
jsp页面
创新互联公司是一家集网站建设,乌鲁木齐企业网站建设,乌鲁木齐品牌网站建设,网站定制,乌鲁木齐网站建设报价,网络营销,网络优化,乌鲁木齐网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
-
-
-
-
-
-
-
- 横向纵向菜单
-
-
-
-
- 菜单项1
-
-
-
- 子菜单项11
-
-
-
- 子菜单项12
-
-
-
-
- 菜单项2
-
-
-
- 子菜单项21
-
-
-
- 子菜单项22
-
-
-
-
- 菜单项3
-
-
-
- 子菜单项31
-
-
-
- 子菜单项32
-
-
-
-
-
-
-
-
-
- 菜单项1
-
-
-
- 子菜单项11
-
-
-
- 子菜单项12
-
-
-
-
- 菜单项2
-
-
-
- 子菜单项21
-
-
-
- 子菜单项22
-
-
-
-
- 菜单项3
-
-
-
- 子菜单项31
-
-
-
- 子菜单项32
-
-
-
-
-
-
css样式
- ul,li{
- /*清除ul和li上默认的小圆点*/
- list-style: none;
- }
-
- ul {
- /*清除子菜单的缩进值*/
- padding: 0;
- margin: 0;
- }
- .main,.hmain {
- background-p_w_picpath: url(../p_w_picpaths/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: 3px;
- padding-bottom: 3px;
- }
- .main a, .hmain a {
- color: white;
- background-p_w_picpath: url(../p_w_picpaths/collapsed.gif);
- background-repeat: no-repeat;
- background-position: 3px center;
- }
- .main li a, .hmain li a {
- color: black;
- background-p_w_picpath: none;
- }
- .main ul, .hmain ul {
- display: none;
- }
- .hmain {
- float: left;
- margin-right: 1px;
- }
Jquery代码
- $(document).ready(function(){
- //页面中的DOM已经装载完成时，执行的代码
- $(".main > a").click(function(){
- //找到主菜单项对应的子菜单项
- var ulNode = $(this).next("ul");
- /*
- if (ulNode.css("display") == "none") {
- ulNode.css("display","block");
- } else {
- ulNode.css("display","none");
- }
- */
- //ulNode.show("slow");//normal fast
- //ulNode.hide();
- //ulNode.toggle();
- //
- //ulNode.slideDown("slow");
- //ulNode.slideUp;
- ulNode.slideToggle();
- changeIcon($(this));
- });
- $(".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-p_w_picpath").indexOf("collapsed.gif") >= 0) {
- mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");
- } else {
- mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");
- }
- }
- }
当前题目：Jquery系列之横向纵向菜单
文章来源：
http://kswjz.com/article/gpphde.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
