[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖

[问题求助] JS+HTML怎样修改鼠标悬停展开菜单?

希望懂 html 和 js 的朋友帮个忙!!
下面的网页源码是我从网上找到的 http://www.csrcode.cn/html/txdm/cddh/3819.htm

效果是:鼠标移动到菜单上,菜单会自动展开。
但是鼠标一移动开,菜单也就收回了;

如何修改一下,使得它的效果和xp在任务栏上新建的工具栏一个效果,
也就是:鼠标移动到菜单1上则展开此菜单,然后如果鼠标移动到其他的空白处,不收回菜单1,若单击空白处,则收回菜单1;
如果移动到另一菜单2上,则收回菜单1,展开菜单2.
html 和 js 我完全不懂,多些各位的帮助先
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>CSS+JS打造兼容性很好的三级导航菜单丨芯晴网页特效丨CsrCode.Cn</title>
  5. <style>
  6. .suckerdiv ul{
  7. margin: 0;
  8. padding: 0;
  9. list-style-type: none;
  10. width: 150px;
  11. border-bottom: 1px solid #ccc;
  12. }
  13. .suckerdiv ul li{
  14. position: relative;
  15. }
  16. .suckerdiv ul li ul{
  17. left: 149px;
  18. position: absolute;
  19. width: 160px;
  20. top: 0;
  21. display: none;
  22. }
  23. .suckerdiv ul li ul li ul{
  24. left: 159px;
  25. }
  26. .suckerdiv ul li a{
  27. display: block;
  28. color: black;
  29. text-decoration: none;
  30. font:12px 宋体;
  31. background: #fff;
  32. padding: 5px 5px;
  33. border: 1px solid #ccc;
  34. border-bottom: 0;
  35. }
  36. .suckerdiv ul li a:visited{
  37. color: black;
  38. }
  39. .suckerdiv ul li a:hover{
  40. color: white;
  41. background-color: gray;
  42. }
  43. .suckerdiv .subfolderstyle{
  44. background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
  45. }
  46. * html .suckerdiv ul li { float: left; height: 1%; }
  47. * html .suckerdiv ul li a { height: 1%; }
  48. </style>
  49. <script type="text/javascript">
  50. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  51. function buildsubmenus(){
  52. for (var i=0; i<menuids.length; i++){
  53.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  54.     for (var t=0; t<ultags.length; t++){
  55.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  56.     ultags[t].parentNode.onmouseover=function(){
  57.     this.getElementsByTagName("ul")[0].style.display="block"
  58.     }
  59.     ultags[t].parentNode.onmouseout=function(){
  60.     this.getElementsByTagName("ul")[0].style.display="block"
  61.     }
  62.     }
  63.   }
  64. }
  65. if (window.addEventListener)
  66. window.addEventListener("load", buildsubmenus, false)
  67. else if (window.attachEvent)
  68. window.attachEvent("onload", buildsubmenus)
  69. </script>
  70. </head>
  71. <body>
  72. <div class="suckerdiv">
  73. <ul id="suckertree1">
  74. <li><a href="#">Item 1</a></li>
  75. <li><a href="#">Item 2</a></li>
  76. <li><a href="#">Folder 1</a>
  77.   <ul>
  78.   <li><a href="#">Sub Item 1.1</a></li>
  79.   <li><a href="#">Sub Item 1.2</a></li>
  80.   </ul>
  81. </li>
  82. <li><a href="#">Item 3</a></li>
  83. <li><a href="#">Folder 2</a>
  84.   <ul>
  85.   <li><a href="#">Sub Item 2.1</a></li>
  86.   <li><a href="#">Folder 2.1</a>
  87.     <ul>
  88.     <li><a href="#">Sub Item 2.1.1</a></li>
  89.     <li><a href="#">Sub Item 2.1.2</a></li>
  90.     <li><a href="#">Sub Item 2.1.3</a></li>
  91.     <li><a href="#">Sub Item 2.1.4</a></li>
  92.     </ul>
  93.   </li>
  94. </ul>
  95. </a>
  96. </li>
  97. <li><a href="#">Item 4</a></li>
  98. </ul>
  99. </div>
  100. </body>
  101. </html>
  102. <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:源码爱好者</font></p>
复制代码
。。

用 jquery 实现比较方便

TOP

  谢谢分享
http://www.diecasting86.com

TOP

学习了,谢谢分享

TOP

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>CSS+JS打造兼容性很好的三級導航菜單?芯晴網頁特效?CsrCode.Cn</title>
  5. <style>
  6. .suckerdiv ul{
  7. margin: 0;
  8. padding: 0;
  9. list-style-type: none;
  10. width: 150px;
  11. border-bottom: 1px solid #ccc;
  12. }
  13. .suckerdiv ul li{
  14. position: relative;
  15. }
  16. .suckerdiv ul li ul{
  17. left: 149px;
  18. position: absolute;
  19. width: 160px;
  20. top: 0;
  21. display: none;
  22. }
  23. .suckerdiv ul li ul li ul{
  24. left: 159px;
  25. }
  26. .suckerdiv ul li a{
  27. display: block;
  28. color: black;
  29. text-decoration: none;
  30. font:12px 宋體;
  31. background: #fff;
  32. padding: 5px 5px;
  33. border: 1px solid #ccc;
  34. border-bottom: 0;
  35. }
  36. .suckerdiv ul li a:visited{
  37. color: black;
  38. }
  39. .suckerdiv ul li a:hover{
  40. color: white;
  41. background-color: gray;
  42. }
  43. .suckerdiv .subfolderstyle{
  44. background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;
  45. }
  46. * html .suckerdiv ul li { float: left; height: 1%; }
  47. * html .suckerdiv ul li a { height: 1%; }
  48. </style>
  49. <script type="text/javascript">
  50. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
  51. function buildsubmenus(){
  52. for (var i=0; i<menuids.length; i++){
  53.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
  54.     for (var t=0; t<ultags.length; t++){
  55.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
  56.     ultags[t].parentNode.onmouseover=function(){
  57.     this.getElementsByTagName("ul")[0].style.display="block"
  58.     }
  59.     ultags[t].parentNode.onmouseout=function(){
  60.     this.getElementsByTagName("ul")[0].style.display="block"
  61.     }
  62.     }
  63.   }
  64. }
  65. function test(){
  66. document.getElementsByTagName("ul")[1].style.display="none"
  67. document.getElementsByTagName("ul")[2].style.display="none"
  68. }
  69. if (window.addEventListener)
  70. window.addEventListener("load", buildsubmenus, false)
  71. else if (window.attachEvent)
  72. window.attachEvent("onload", buildsubmenus)
  73. </script>
  74. </head>
  75. <body>
  76. <div class="suckerdiv">
  77. <ul id="suckertree1">
  78. <li><a href="#">Item 1</a></li>
  79. <li><a href="#">Item 2</a></li>
  80. <li><a href="#" >Folder 1</a>
  81.   <ul id="XXX1">
  82.   <li><a href="#">Sub Item 1.1</a></li>
  83.   <li><a href="#" >Sub Item 1.2</a></li>
  84.   </ul>
  85. </li>
  86. <li><a href="#">Item 3</a></li>
  87. <li><a href="#">Folder 2</a>
  88.   <ul id="XXX2">
  89.   <li><a href="#">Sub Item 2.1</a></li>
  90.   <li><a href="#">Folder 2.1</a>
  91.     <ul>
  92.     <li><a href="#">Sub Item 2.1.1</a></li>
  93.     <li><a href="#">Sub Item 2.1.2</a></li>
  94.     <li><a href="#">Sub Item 2.1.3</a></li>
  95.     <li><a href="#">Sub Item 2.1.4</a></li>
  96.     </ul>
  97. </li>
  98. </ul>
  99. </a>
  100. </li>
  101. <li><a href="#">Item 4</a></li>
  102. </ul>
  103. </div>
  104. </body>
  105. </html>
  106. <button onclick="test()">Copy Text</button>
  107. <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>?CsrCode.Cn 收集於互聯網,只為興趣與學習交流,不作商業用途。來源:源碼愛好者</font></p>
复制代码
1

评分人数

带内地用语或带里语的文章,在下读写总觉有点吃力;
如误解了各位意思的讲勿见怪   ^_^

TOP

这个是通过DISPLAY(CSS)还有DOM来实现的
wc726842270 发表于 2012-3-8 11:31



    那你会改吗??

TOP

这个是通过DISPLAY(CSS)还有DOM来实现的
枫中残雪:风停了,我的心却在动,让我心中的寒意走向远方

TOP

回复 2# Seder


    谢谢了先!!
js 和 html 我是确实不懂。据我理解,你的附件和顶楼的代码,应该是完全不同的算法;而且你的附件的方法要修改菜单貌似很复杂。

TOP

你可以参考下这个附件~

TOP

返回列表