甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

Jquery系列之横向纵向菜单

jsp页面

创新互联公司是一家集网站建设,乌鲁木齐企业网站建设,乌鲁木齐品牌网站建设,网站定制,乌鲁木齐网站建设报价,网络营销,网络优化,乌鲁木齐网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" 
  2.     pageEncoding="UTF-8"%> 
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10. 横向纵向菜单 
  11.  
  12.  
  13.     
       
    •              
    •                     菜单项1 
    •                 
         
      •                     
      •  
      •                         子菜单项11 
      •                     
        •  
      •                     
      •  
      •                         子菜单项12 
      •                     
        •  
      •                 
       
    •             
      •  
    •              
    •                 菜单项2 
    •                 
         
      •                     
      •  
      •                         子菜单项21 
      •                     
        •  
      •                     
      •  
      •                         子菜单项22 
      •                     
        •  
      •                 
       
    •             
      •  
    •              
    •                 菜单项3 
    •                 
         
      •                     
      •  
      •                         子菜单项31 
      •                     
        •  
      •                     
      •  
      •                         子菜单项32 
      •                     
        •  
      •                 
       
    •             
      •  
    •         
     
  14.          
  15.          
  16.          
  17.         
       
    •              
    •                     菜单项1 
    •                 
         
      •                     
      •  
      •                         子菜单项11 
      •                     
        •  
      •                     
      •  
      •                         子菜单项12 
      •                     
        •  
      •                 
       
    •             
      •  
    •              
    •                 菜单项2 
    •                 
         
      •                     
      •  
      •                         子菜单项21 
      •                     
        •  
      •                     
      •  
      •                         子菜单项22 
      •                     
        •  
      •                 
       
    •             
      •  
    •              
    •                 菜单项3 
    •                 
         
      •                     
      •  
      •                         子菜单项31 
      •                     
        •  
      •                     
      •  
      •                         子菜单项32 
      •                     
        •  
      •                 
       
    •             
      •  
    •         
     
  18.  
  19.  

css样式

  1. ul,li{  
  2.     /*清除ul和li上默认的小圆点*/ 
  3.     list-style: none;  
  4. }  
  5.  
  6. ul {  
  7.     /*清除子菜单的缩进值*/ 
  8.     padding: 0;  
  9.     margin: 0;  
  10. }  
  11. .main,.hmain {  
  12.     background-p_w_picpath: url(../p_w_picpaths/title.gif);  
  13.     background-repeat: repeat-x;  
  14.     width: 120px;  
  15. }  
  16. li {  
  17.     background-color: #EEEEEE;  
  18. }  
  19. a {  
  20.     /*取消所有的下划线*/ 
  21.     text-decoration: none;  
  22.     padding-left: 20px;  
  23.     display: block;  
  24.     display: inline-block;  
  25.     width: 100px;  
  26.     padding-top: 3px;  
  27.     padding-bottom: 3px;  
  28. }  
  29. .main a, .hmain a {  
  30.     color: white;  
  31.     background-p_w_picpath: url(../p_w_picpaths/collapsed.gif);  
  32.     background-repeat: no-repeat;  
  33.     background-position: 3px center;  
  34. }  
  35. .main li a, .hmain li a {  
  36.     color: black;  
  37.     background-p_w_picpath: none;  
  38. }  
  39. .main ul, .hmain ul {  
  40.     display: none;  
  41. }  
  42. .hmain {  
  43.     float: left;  
  44.     margin-right: 1px;  
  45. } 

Jquery代码

 

  1. $(document).ready(function(){  
  2.     //页面中的DOM已经装载完成时，执行的代码 
  3.     $(".main > a").click(function(){  
  4.         //找到主菜单项对应的子菜单项 
  5.         var ulNode = $(this).next("ul");  
  6.         /* 
  7.         if (ulNode.css("display") == "none") { 
  8.             ulNode.css("display","block"); 
  9.         } else { 
  10.             ulNode.css("display","none"); 
  11.         } 
  12.         */ 
  13.         //ulNode.show("slow");//normal fast 
  14.         //ulNode.hide(); 
  15.         //ulNode.toggle(); 
  16.         // 
  17.         //ulNode.slideDown("slow"); 
  18.         //ulNode.slideUp; 
  19.         ulNode.slideToggle();  
  20.         changeIcon($(this));  
  21.     });  
  22.     $(".hmain").hover(function(){  
  23.         $(this).children("ul").slideDown();  
  24.         changeIcon($(this).children("a"));  
  25.     },function(){  
  26.         $(this).children("ul").slideUp();  
  27.         changeIcon($(this).children("a"));  
  28.     });  
  29. });  
  30.  
  31. /** 
  32.  * 修改主菜单的指示图标 
  33.  */ 
  34. function changeIcon(mainNode) {  
  35.     if (mainNode) {  
  36.         if (mainNode.css("background-p_w_picpath").indexOf("collapsed.gif") >= 0) {  
  37.             mainNode.css("background-p_w_picpath","url('p_w_picpaths/expanded.gif')");  
  38.         } else {  
  39.             mainNode.css("background-p_w_picpath","url('p_w_picpaths/collapsed.gif')");  
  40.         }  
  41.     }  
  42. }  

 


网站栏目：Jquery系列之横向纵向菜单
链接URL：http://chengdu.cdxwcx.cn/article/gpphde.html

其他资讯