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

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
1楼 跳转到 » 倒序看帖
打印
tT
发表于 2012-3-6 14:45 | 显示全部帖子

[问题求助] 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.  

  14. .suckerdiv ul li{

  15. position: relative;

  16. }

  17. .suckerdiv ul li ul{

  18. left: 149px;

  19. position: absolute;

  20. width: 160px;

  21. top: 0;

  22. display: none;

  23. }

  24. 

  25. .suckerdiv ul li ul li ul{ 

  26. left: 159px; 

  27. }

  28. 

  29. .suckerdiv ul li a{

  30. display: block;

  31. color: black;

  32. text-decoration: none;

  33. font:12px 宋体;

  34. background: #fff;

  35. padding: 5px 5px;

  36. border: 1px solid #ccc;

  37. border-bottom: 0;

  38. }

  39. .suckerdiv ul li a:visited{

  40. color: black;

  41. }

  42. .suckerdiv ul li a:hover{

  43. color: white;

  44. background-color: gray;

  45. }

  46. .suckerdiv .subfolderstyle{

  47. background: url(http://www.codefans.net/jscss/demoimg/201201/arrow-list.gif) no-repeat center right;

  48. }

  49. * html .suckerdiv ul li { float: left; height: 1%; }

  50. * html .suckerdiv ul li a { height: 1%; }

  51. </style>

  52. <script type="text/javascript">

  53. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas

  54. function buildsubmenus(){

  55. for (var i=0; i<menuids.length; i++){

  56.   var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

  57.     for (var t=0; t<ultags.length; t++){

  58.     ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"

  59.     ultags[t].parentNode.onmouseover=function(){

  60. 

  61.     this.getElementsByTagName("ul")[0].style.display="block"

  62. 

  63.     }

  64.     ultags[t].parentNode.onmouseout=function(){

  65. 

  66.     this.getElementsByTagName("ul")[0].style.display="block"

  67. 

  68. 

  69. 

  70.     }

  71.     }

  72.   }

  73. }

  74. 

  75. if (window.addEventListener)

  76. window.addEventListener("load", buildsubmenus, false)

  77. else if (window.attachEvent)

  78. window.attachEvent("onload", buildsubmenus)

  79. </script>

  80. </head>

  81. <body>

  82. 

  83. <div class="suckerdiv">

  84. <ul id="suckertree1">

  85. <li><a href="#">Item 1</a></li>

  86. <li><a href="#">Item 2</a></li>

  87. <li><a href="#">Folder 1</a>

  88.   <ul>

  89.   <li><a href="#">Sub Item 1.1</a></li>

  90.   <li><a href="#">Sub Item 1.2</a></li>

  91.   </ul>

  92. </li>

  93. <li><a href="#">Item 3</a></li>

  94. 

  95. <li><a href="#">Folder 2</a>

  96.   <ul>

  97.   <li><a href="#">Sub Item 2.1</a></li>

  98.   <li><a href="#">Folder 2.1</a>

  99.     <ul>

  100.     <li><a href="#">Sub Item 2.1.1</a></li>

  101.     <li><a href="#">Sub Item 2.1.2</a></li>

  102.     <li><a href="#">Sub Item 2.1.3</a></li>

  103.     <li><a href="#">Sub Item 2.1.4</a></li>

  104.     </ul>

  105.   </li>

  106. </ul>

  107. </a>

  108. </li>

  109. <li><a href="#">Item 4</a></li>

  110. </ul>

  111. </div>

  112. </body>

  113. </html>

  114. 

  115. <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>
复制代码
。。
收藏 分享

QIAOXINGXING

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
2楼
发表于 2012-3-8 11:14 | 显示全部帖子
回复 2# Seder


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

TOP

QIAOXINGXING

Rank: 4

帖子
241 
积分
431 
技术
24  
捐助
0  
注册时间
2011-9-15 
3楼
发表于 2012-3-8 17:45 | 显示全部帖子
这个是通过DISPLAY（CSS）还有DOM来实现的
wc726842270 发表于 2012-3-8 11:31



    那你会改吗？？

TOP

返回列表