首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

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

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

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

读书人精选
热点排行