美浩工作室是一个以90后团队为主的网站设计,制作,优化,维护为一体的网站建设工作室,为您量身定制适合企业自身的网站,欢迎咨询:15249241469

js菜单点击显示与改变图标

JavaScript mihoweb 3211℃ 0评论

最近在一个项目后台的时候,客户要一种菜单点击效果,自己弄的没有人家要的效果,汗(其实都差不多啦),但是为了满足人家的愿望,只能改了,最后在度娘上找,没有找到非常适合的,最后在一个博客上发现了一位高人写的js效果,真是客户想要的,于是乎,就秀秀改改的用上了。

多说无益…上代码!

  1. <html>
  2. <head>
  3. <title>标题页</title>
  4. <meta http-equiv=content-type content=“text/html;charset=GBK”>
  5. <style type=“text/css”>
  6. A:visited{color:blue;}
  7. A:hover{color:red;}
  8. A{
  9. TEXT-DECORATION:none;
  10. outline:none;
  11. }
  12. </style>
  13. <script language=“JavaScript”>
  14. <!–
  15. // 判断浏览器的变量
  16. IE4 = (navigator.appName == “Microsoft Internet Explorer”) ? true : false;
  17. // 初始化菜单
  18. function initIt(){
  19. if (!IE4) return;
  20. divColl = document.getElementsByTagName(“DIV”);
  21. for (i=0; i<divColl.length; i++) {
  22. whichele = divColl(i);
  23. if (whichele.className == “child”) whichele.style.display = “none”;
  24. }
  25. var myLinks = document.links;
  26. // 去掉超链接虚边框
  27. for( j=0; j<myLinks.length; j++){
  28. myLinks[j].onfocus = function(){this.blur();}
  29. }
  30. }
  31. // 展开菜单的方法
  32. function expandIt(ele) {
  33. if (!IE4) return;
  34. var name = ele + “Child”;
  35. whichele = document.all[name];
  36. if (whichele.style.display == “none”) {
  37. whichele.style.display = “block”;
  38. }else {
  39. whichele.style.display = “none”;
  40. }
  41. }
  42. // 改变链接图片
  43. function changeImg(img){
  44. img.src = (img.src.indexOf(http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png) != -1)?http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_down.png:http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png;
  45. }
  46. // 鼠标悬停的时候改变颜色
  47. function mouseOn(obj){
  48. obj.bgColor = “#EFFFFF”;
  49. }
  50. // 鼠标离开的时候改变颜色
  51. function mouseOut(obj){
  52. obj.bgColor = “#FFFFFF”;
  53. }
  54. onload = initIt;
  55. –>
  56. </script>
  57. </head>
  58. <body>
  59. <!–网站收藏–>
  60. <div id=“menuParent”class=“parent”>
  61. <img name=“image1″ id=“image1″ src=http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png onClick=“expandIt(‘menu’);changeImg(this);” >网站收藏</img>
  62. </div>
  63. <div id=“menuChild”class=“child”>
  64. <table border=0 cellspacing=0 cellpadding=0>
  65. <tr>
  66. <td width=30 align=“right”>1</td>
  67. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  68. <a href=“http://www.mihoweb.com” target=“_blank” >美浩工作室</a>
  69. </td>
  70. </tr>
  71. </table>
  72. <table border=0 cellspacing=0 cellpadding=0>
  73. <tr>
  74. <td width=30 align=“right”>2</td>
  75. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  76. <a href=“http://www.mihoweb.com” target=“_blank” >MIHO</a>
  77. </td>
  78. </tr>
  79. </table>
  80. <table border=0 cellspacing=0 cellpadding=0>
  81. <tr>
  82. <td width=30 align=“right”>3</td>
  83. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  84. <a href=“http://www.mihoweb.com” target=“_blank” >美浩</a>
  85. </td>
  86. </tr>
  87. </table>
  88. </div>
  89. <!–文本区域–>
  90. <div id=“Menu2Parent”class=“parent”>
  91. <img name=“image1″ id=“image1″ src=http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png onClick=“expandIt(‘Menu2′);changeImg(this);” >文本区域</img>
  92. </div>
  93. <div id=“Menu2Child”class=“child”>
  94. <table border=0 cellspacing=0 cellpadding=0>
  95. <tr>
  96. <td width=“30″> </td>
  97. <td onmouseover=“mouseOn(this);return false;” onmouseout=“mouseOut(this);return false;”>
  98. <a href=“#” onclick=“expandIt(‘Menu21′);”>文章一</a>
  99. </td>
  100. </tr>
  101. </table>
  102. <div id=“Menu21Child”class=“child” style=“width:260″>
  103. <table border=0 cellspacing=0 cellpadding=0>
  104. <tr>
  105. <td width=“30″></td>
  106. <td bgColor=“DFFFFF”>
  107. php是目前web应用程序开发者使用最为广泛…
  108. </td>
  109. </tr>
  110. </table>
  111. </div>
  112. <table border=0 cellspacing=0 cellpadding=0>
  113. <tr>
  114. <td width=“30″> </td>
  115. <td onmouseover=“mouseOn(this);return false;” onmouseout=“mouseOut(this);return false;”>
  116. <a href=“#” onclick=“expandIt(‘Menu22′);”>文章二</a>
  117. </td>
  118. </tr>
  119. </table>
  120. <div id=“Menu22Child”class=“child” style=“width:260″>
  121. <table border=0 cellspacing=0 cellpadding=0>
  122. <tr>
  123. <td width=“30″></td>
  124. <td bgColor=“DFFFFF”>
  125. 再见,IE6……
  126. </td>
  127. </tr>
  128. </table>
  129. </div>
  130. <table border=0 cellspacing=0 cellpadding=0>
  131. <tr>
  132. <td width=“30″> </td>
  133. <td onmouseover=“mouseOn(this);return false;” onmouseout=“mouseOut(this);return false;”>
  134. <a href=“#” onclick=“expandIt(‘Menu23′);”>文章三</a>
  135. </td>
  136. </tr>
  137. </table>
  138. <div id=“Menu23Child”class=“child” style=“width:260″>
  139. <table border=0 cellspacing=0 cellpadding=0>
  140. <tr>
  141. <td width=“30″></td>
  142. <td bgColor=“DFFFFF”>
  143. 移动互联是2012年的热门词语…..
  144. </td>
  145. </tr>
  146. </table>
  147. </div>
  148. </div>
  149. <!–多层菜单演示–>
  150. <div id=“Menu3Parent”class=“parent”>
  151. <img name=“image1″ id=“image1″ src=http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png onClick=“expandIt(‘Menu3′);changeImg(this);” >多层菜单演示</img>
  152. </div>
  153. <div id=“Menu3Child”class=“child”>
  154. <table border=0 cellspacing=0 cellpadding=0>
  155. <tr>
  156. <td width=30> </td>
  157. <td>
  158. <!–start–>
  159. <div id=“Menu3Parent”class=“parent”>
  160. <img name=“image1″ id=“image1″ src=http://mahaozhou.web-189.com/wp-content/uploads/2012/03/arrow_right1.png onClick=“expandIt(‘Menu4′);changeImg(this);” >多层</img>
  161. </div>
  162. <div id=“Menu4Child”class=“child”>
  163. <table border=0 cellspacing=0 cellpadding=0>
  164. <tr>
  165. <td width=30> </td>
  166. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  167. <a href=“#”>子菜单一</a>
  168. </td>
  169. </tr>
  170. <tr>
  171. <td> </td>
  172. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  173. <a href=“#”>子菜单二</a>
  174. </td>
  175. </tr>
  176. <tr>
  177. <td> </td>
  178. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  179. <a href=“#”>子菜单三</a>
  180. </td>
  181. </tr>
  182. </table>
  183. </div>
  184. <!–end–>
  185. </td>
  186. </tr>
  187. </table>
  188. <table border=0 cellspacing=0 cellpadding=0>
  189. <tr>
  190. <td width=30> </td>
  191. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  192. <a href=“#”>子菜单二</a>
  193. </td>
  194. </tr>
  195. </table>
  196. <table border=0 cellspacing=0 cellpadding=0>
  197. <tr>
  198. <td width=30> </td>
  199. <td onmouseover=“mouseOn(this);” onmouseout=“mouseOut(this);”>
  200. <a href=“#”>子菜单三</a>
  201. </td>
  202. </tr>
  203. </table>
  204. </div>
  205. </body>
  206. </html>

其实这个效果很常见的,但是真的在用到的时候可能就找不见了,有需要的可以自己修改一下,就成为自己的网站所用啦。虽然效果不炫丽,但是还是可以说明问题的嘛….

如果您喜欢这篇文章,欢迎分享订阅。
如果您喜欢这篇文章,欢迎分享订阅。

Incoming search terms:

  • js
  • 38PN
  • 4LOB
  • js 后台菜单 最小化保留图标
  • OQPL
  • VO64
  • WJ5Y

转载请注明:美浩工作室官方博客 » js菜单点击显示与改变图标

喜欢 (7)