返回列表 发帖
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>
复制代码
。。
收藏 分享

Seder

Rank: 2

帖子
99 
积分
112 
技术
7  
捐助
0  
注册时间
2011-9-2 
2楼
发表于 2012-3-8 01:09 | 只看该作者
你可以参考下这个附件~

TOP

QIAOXINGXING

Rank: 4

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


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

TOP

wc726842270

Rank: 7Rank: 7Rank: 7

帖子
1107 
积分
4218 
技术
37  
捐助
0  
注册时间
2010-6-8 
4楼
发表于 2012-3-8 11:31 | 只看该作者
这个是通过DISPLAY（CSS）还有DOM来实现的
枫中残雪：风停了，我的心却在动，让我心中的寒意走向远方

TOP

QIAOXINGXING

Rank: 4

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



    那你会改吗？？

TOP

Taurus

Rank: 5Rank: 5

帖子
181 
积分
634 
技术
7  
捐助
0  
注册时间
2009-1-6 
6楼
发表于 2012-5-9 20:45 | 只看该作者 
  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. function test(){ 

  72. document.getElementsByTagName("ul")[1].style.display="none"

  73. document.getElementsByTagName("ul")[2].style.display="none"

  74. 

  75. }

  76. 

  77. if (window.addEventListener)

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

  79. else if (window.attachEvent)

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

  81. </script>

  82. </head>

  83. <body>

  84. 

  85. <div class="suckerdiv">

  86. <ul id="suckertree1">

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

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

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

  90.   <ul id="XXX1">

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

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

  93.   </ul>

  94. </li>

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

  96. 

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

  98.   <ul id="XXX2">

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

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

  101.     <ul>

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

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

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

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

  106.     </ul>

  107.  </li>

  108. </ul>

  109. </a>

  110. </li>

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

  112. </ul>

  113. </div>

  114. </body>

  115. </html>

  116. <button onclick="test()">Copy Text</button>

  117. <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴網頁特效</a>?CsrCode.Cn 收集於互聯網，只為興趣與學習交流，不作商業用途。來源：源碼愛好者</font></p>
复制代码
1

评分人数

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

TOP

xybzm

Rank: 1

帖子
11 
积分
22 
技术
0  
捐助
0  
注册时间
2011-11-14 
7楼
发表于 2013-11-5 22:22 | 只看该作者
学习了，谢谢分享

TOP

920168

Rank: 2

帖子
105 
积分
185 
技术
18  
捐助
0  
注册时间
2011-9-16 
8楼
发表于 2014-9-25 23:18 | 只看该作者
  谢谢分享
http://www.diecasting86.com

TOP

CrLf

Rank: 8Rank: 8

帖子
6388 
积分
18843 
技术
982  
捐助
100  
注册时间
2010-10-9 
9楼
发表于 2014-9-26 00:56 | 只看该作者
用 jquery 实现比较方便
链接：在线第三方命令行工具下载   bat、vbs、js 原生混编

TOP

返回列表