首页>>导航菜单>>Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接(2013-10-03)

Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接

 一般类似向下打开的导航菜单都是小类才有链接，这个因为是鼠标经过而不是点击的，大小类别都是链接

 

Jquery二级菜单，鼠标经过显示二级分类,大类和小类都有链接
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="FrontProductsCategory_show01-1293769104214" class="FrontProductsCategory_show01-d1_c2"><div class="menu-first">  
  2.     <ul>  
  3.     <li >  
  4.           <a href="http://www.freejs.net/daohangcaidan.html" target="_self" class="menu-text1">  
  5.                     导航菜单<span></span>  
  6.                 </a>  
  7.                 <div class="menu-second">  
  8.             <p class="top"></p>  
  9.             <ul>  
  10.                 <li>  
  11.                       <a href="http://www.freejs.net/article_daohangcaidan_36.html" target="_self" class="menu-text2">  
  12.                         水平展开菜单,侧拉菜单  
  13.                         </a>  
  14.                         </li>  
  15.                 <li>  
  16.                       <a href="" target="_self" class="menu-text2">  
  17.                         A  
  18.                         </a>  
  19.                         </li>  
  20.                 <li>  
  21.                       <a href="" target="_self" class="menu-text2">  
  22.                         B<span>(1)</span>  
  23.                         </a>  
  24.                         </li>  
  25.                 <li>  
  26.                       <a href="" target="_self" class="menu-text2">  
  27.                         C<span>(5)</span>  
  28.                         </a>  
  29.                         </li>  
  30.                 </ul>  
  31.             <p class="bottom"></p>  
  32.           </div>  
  33.           </li>  
  34.        
  35.      
  36.       <li >  
  37.           <a href="" target="_self" class="menu-text1">  
  38.                     表单<span></span>  
  39.                 </a>  
  40.                 <div class="menu-second">  
  41.             <p class="top"></p>  
  42.             <ul>  
  43.                 <li>  
  44.                       <a href="" target="_self" class="menu-text2">  
  45.                         A<span>(12)</span>  
  46.                         </a>  
  47.                         </li>  
  48.                 <li>  
  49.                       <a href="" target="_self" class="menu-text2">  
  50.                         B<span>(19)</span>  
  51.                         </a>  
  52.                         </li>  
  53.                 <li>  
  54.                       <a href="" target="_self" class="menu-text2">  
  55.                         C<span>(11)</span>  
  56.                         </a>  
  57.                         </li>  
  58.                 </ul>  
  59.             <p class="bottom"></p>  
  60.           </div>  
  61.           </li>  
  62.       <li class="menu-none">  
  63.           <a href="" target="_self" class="menu-text1">  
  64.                     焦点图<span>(28)</span>  
  65.                 </a>  
  66.                 </li>  
  67.         
  68.       </ul>  
  69.   </div>  
  70. </div>   

 

CSS Code
  1. @charset "utf-8";  
  2. .FrontProductsCategory_show01-d1_c2{  
  3.    text-align: left;  
  4.     margin: 0px auto;  
  5.     padding-left: 65px;  
  6.     width: 75%;  
  7.     color: #4c4948;  
  8.     clear: both;  
  9.     overflow: hidden;  
  10. }  
  11. .FrontProductsCategory_show01-d1_c2 UL{  
  12.    padding-bottom: 0px;  
  13.     list-style-type: none;  
  14.     margin: 0px;  
  15.     padding-left: 0px;  
  16.     padding-right: 0px;  
  17.     padding-top: 0px;  
  18. }  
  19. .FrontProductsCategory_show01-d1_c2 LI{  
  20.    padding-bottom: 0px;  
  21.     list-style-type: none;  
  22.     margin: 0px;  
  23.     padding-left: 0px;  
  24.     padding-right: 0px;  
  25.     padding-top: 0px;  
  26. }  
  27. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI{  
  28.    display: inline;  
  29. }  
  30. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A{  
  31.    border-bottom: #fff 1px solid;  
  32.     line-height: 32px;  
  33.     width: 160px;  
  34.     display: block;  
  35.     background: url(first-bg.gif) no-repeat 0px 0px;  
  36.     height: 32px;  
  37.     border-top: #fff 1px solid;  
  38.     text-decoration: none;  
  39. }  
  40. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A:hover{  
  41.    background: url(index_11.jpg) no-repeat 0px 0px;  
  42.     text-decoration: none;  
  43. }  
  44. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI A.current{  
  45.    width: 160px;  
  46.     background: url(first-bg.gif) no-repeat 0px -64px;  
  47.     height: 32px;  
  48. }  
  49. .FrontProductsCategory_show01-d1_c2 .menu-second{  
  50.    padding-bottom: 0px;  
  51.     margin: 0px;  
  52.     padding-left: 0px;  
  53.     width: 160px;  
  54.     padding-right: 0px;  
  55.     display: none;  
  56.     height: 100%;  
  57.     padding-top: 0px;  
  58. }  
  59. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI{  
  60.    padding-bottom: 0px;  
  61.     margin: 0px;  
  62.     padding-left: 0px;  
  63.     padding-right: 0px;  
  64.     padding-top: 0px;  
  65. }  
  66. .FrontProductsCategory_show01-d1_c2 .menu-second P{  
  67.    margin: 0px;  
  68. }  
  69. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI A{  
  70.    line-height: 25px;  
  71.     margin: 1px 0px;  
  72.     width: 160px;  
  73.     background: url(second-b.gif) no-repeat 0px 0px;  
  74.     height: 25px;  
  75.     text-decoration: none;  
  76. }  
  77. .FrontProductsCategory_show01-d1_c2 .menu-second UL LI A:hover{  
  78.    width: 160px;  
  79.     background: url(second-b.gif) no-repeat 0px -25px;  
  80. }  
  81. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A{  
  82.    line-height: 32px;  
  83.     margin: 2px 0px;  
  84.     width: 160px;  
  85.     display: block;  
  86.     background: url(first-bh.gif) no-repeat 0px 0px;  
  87.     height: 32px;  
  88.     text-decoration: none;  
  89. }  
  90. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A:hover{  
  91.    width: 160px;  
  92.     background: url(first-bh.gif) no-repeat 0px -32px;  
  93.     height: 32px;  
  94.     text-decoration: none;  
  95. }  
  96. .FrontProductsCategory_show01-d1_c2 .menu-first UL LI.menu-none A.current{  
  97.    width: 160px;  
  98.     background: url(first-bh.gif) no-repeat 0px -64px;  
  99.     height: 32px;  
  100.     color: #0066cc;  
  101. }  
  102. A.menu-text1:link{  
  103.    padding-left: 40px;  
  104.     color: #4c4948;  
  105.     font-size: 12px;  
  106.     text-decoration: none;  
  107. }  
  108. A.menu-text1:visited{  
  109.    padding-left: 40px;  
  110.     color: #4c4948;  
  111.     font-size: 12px;  
  112.     text-decoration: none;  
  113. }  
  114. A.menu-text1:active{  
  115.    padding-left: 40px;  
  116.     color: #4c4948;  
  117.     font-size: 12px;  
  118.     text-decoration: none;  
  119. }  
  120. A.menu-text1:hover{  
  121.    color: #0066cc;  
  122.     font-size: 12px;  
  123.     text-decoration: underline;  
  124. }  
  125. A.menu-text2:link{  
  126.    padding-bottom: 0px;  
  127.     padding-left: 40px;  
  128.     padding-right: 0px;  
  129.     color: #3472a1;  
  130.     font-size: 12px;  
  131.     text-decoration: none;  
  132.     padding-top: 0px;  
  133. }  
  134. A.menu-text2:visited{  
  135.    padding-bottom: 0px;  
  136.     padding-left: 40px;  
  137.     padding-right: 0px;  
  138.     color: #3472a1;  
  139.     font-size: 12px;  
  140.     text-decoration: none;  
  141.     padding-top: 0px;  
  142. }  
  143. A.menu-text2:active{  
  144.    padding-bottom: 0px;  
  145.     padding-left: 40px;  
  146.     padding-right: 0px;  
  147.     color: #3472a1;  
  148.     font-size: 12px;  
  149.     text-decoration: none;  
  150.     padding-top: 0px;  
  151. }  
  152. A.menu-text2:hover{  
  153.    color: #0066cc;  
  154.     font-size: 12px;  
  155.     text-decoration: underline;  
  156. }  

 

JavaScript Code
  1. var FrontProductsCategory_show01 = {  
  2.     productListHref :"",  
  3.     categoryId :"",  
  4.     tree :"",  
  5.     productListHrefTarget :"_self",  
  6.     /* 创建一个dhtml树 compId：组件实例ID, width：宽度, height：高度, rootId：根ID */  
  7.     createTree : function(compId, width, height, rootId) {  
  8.         this.tree = new dhtmlXTreeObject(compId, width, height, rootId);  
  9.         this.tree.setOnClickHandler(this.setOnClickHandler);  
  10.         this.tree.setOnOpenHandler(this.tonopen);  
  11.     },  
  12.     /* 设置点击结点的回调函数 cid:商品分类ID */  
  13.     setOnClickHandler : function(cid) {  
  14.         if (FrontProductsCategory_show01.productListHrefTarget == "_blank") {  
  15.             window.open(FrontProductsCategory_show01.productListHref.replace(  
  16.                     "productListHrefParamValue", cid), "",  
  17.                     "toolbar=yes,location=yes,menubar=yes,resizable=yes");  
  18.         } else {  
  19.             window.location.href = FrontProductsCategory_show01.productListHref  
  20.                     .replace("productListHrefParamValue", cid);  
  21.         }  
  22.     },  
  23.     tonopen : function(id, mode) {  
  24.         if (mode > 0) {  
  25.             FrontProductsCategory_show01.tree.setItemColor(id, jQuery(  
  26.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  27.                     .css("color"), jQuery(  
  28.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  29.                     .css("color"));  
  30.         } else {  
  31.             FrontProductsCategory_show01.tree.setItemColor(id, jQuery(  
  32.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  33.                     .css("_color"), jQuery(  
  34.                     "div[class^=FrontProductsCategory_show01-d3] span.standartTreeRow")  
  35.                     .css("_color"));  
  36.         }  
  37.         return true;  
  38.     }  
  39. }  

 


原文地址:http://www.freejs.net/article_daohangcaidan_54.html