您现在的位置： 365建站网 > 365文章 > 隐藏于网页左侧，鼠标单击展开的CSS菜单代码

隐藏于网页左侧，鼠标单击展开的CSS菜单代码

文章来源：365jz.com     点击数：1050    更新时间：2011-03-03 10:36   参与评论

代码简介：

平时隐藏在左侧的CSS动感菜单，像很多导航菜单一样，不点击的时候隐藏在网页左侧，鼠标放上后自动展开，本款是鼠标点击后才激活，然后动画出现，个人感觉比鼠标放上就触发的要好一点，这样更符合浏览者的意愿。

代码内容：

</>code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>隐藏于网页左侧，鼠标单击展开的CSS菜单代码_PQ秀秀网(www.365jz.com)</title>
  5. <style>  
  6. #menuShow{  
  7. border: 1px solid #666666;  
  8. background-color: #EEEEEE;  
  9. padding: 0px;  
  10. font-size: 12px;  
  11. font-family: tahoma;  
  12. position: absolute;  
  13. width: 161px;  
  14. height: auto;  
  15. }  
  16. #menuSelect{  
  17. border: 1px solid #999999;  
  18. background-color: #cccccc;  
  19. padding: 0px;  
  20. font-size: 10px;  
  21. font-family: tahoma;  
  22. position: absolute;  
  23. width: 161px;  
  24. }  
  25. a {  font-family: "tahoma"; font-size: 12px; line-height: 23px; color: #555555; text-decoration: none}  
  26. a:hover {color: #0066CC; text-decoration: none}  
  27. </style> 
  28. </head> 
  29. <body>
  30. <body bgcolor="#FFFFFF" text="#000000">  
  31. <div id="menuSelect" style=""> <a href="#" onClick="moveOnMenu();moveOffSelector()">   
  32.   <img src="/uploads/allimg/201103/20110303134312501.gif" border="0"></a></div>  
  33. <div id="menuShow" style="" align="center"> <a href="#" onClick="moveOffMenu();moveOnSelector()">   
  34.   <img src="/uploads/allimg/201103/20110303134312763.gif" border="0"></a> <br>  
  35. <a href="/">PQ秀秀网</a><br>
  36. <a href="https://www.365jz.com">ASP</a><br>
  37. <a href="/">PHP</a><br>
  38. <a href="/">.NET</a><br>
  39. <a href="/">脚本资源</a><br>
  40. <a href="https://www.365jz.com">jQuery</a><br>
  41. <a href="/">电子书籍</a><br>
  42. <a href="https://www.365jz.com">工具软件</a>
  43. </div>  
  44. <SCRIPT LANGUAGE="JavaScript">  
  45. Show ="no";  
  46. var OffX = -200;  
  47. var PosX =  10;  
  48. var PosY =  10;  
  49. var speed        = 5;  
  50. var increment    = 5;  
  51. var incrementNS4 = 5; 
  52. var is_NS = navigator.appName=="Netscape";  
  53. var is_Ver = parseInt(navigator.appVersion);  
  54. var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;  
  55. var is_NS5up = is_NS&&is_Ver>=5;  
  56. var MenuX = OffX;  
  57. var SelX = PosX;  
  58. var sPosX = PosX;  
  59. var sOffX = OffX;  
  60. if (Show == "yes") {  
  61. sPosX = OffX;  
  62. sOffX = PosX;  
  63. MenuX = sOffX;  
  64. SelX = sPosX;  
  65. }  
  66. if (is_NS4) {  
  67. increment = incrementNS4;  
  68. Lq = "document.layers.";  
  69. Sq = "";  
  70. eval(Lq+'menuSelect'+Sq+'.left=sPosX');  
  71. eval(Lq+'menuShow'+Sq+'.left=sOffX');  
  72. eval(Lq+'menuSelect'+Sq+'.top=PosY');  
  73. eval(Lq+'menuShow'+Sq+'.top=PosY');  
  74. } else {  
  75. Lq = "document.all.";  
  76. Sq = ".style";  
  77. document.getElementById('menuSelect').style.left = sPosX+"px";  
  78. document.getElementById('menuShow').style.left = sOffX+"px";  
  79. document.getElementById('menuSelect').style.top = PosY+"px";  
  80. document.getElementById('menuShow').style.top = PosY+"px";  
  81. }    
  82. function moveOnMenu() {  
  83. if (MenuX < PosX) {   
  84. MenuX = MenuX + increment;  
  85. if (is_NS5up) {  
  86. document.getElementById('menuShow').style.left = MenuX+"px";  
  87. } else {  
  88. eval(Lq+'menuShow'+Sq+'.left=MenuX');  
  89. }  
  90. setTimeout('moveOnMenu()',speed);  
  91.    }  
  92. }  
  93. function moveOffMenu() {  
  94. if (MenuX > OffX) {   
  95. MenuX = MenuX - increment;  
  96. if (is_NS5up) {  
  97. document.getElementById('menuShow').style.left = MenuX+"px";  
  98. } else {  
  99. eval(Lq+'menuShow'+Sq+'.left=MenuX');  
  100. }  
  101. setTimeout('moveOffMenu()',speed);  
  102.    }  
  103. }  
  104. function moveOffSelector() {  
  105. if (SelX > OffX) {   
  106. SelX = SelX - increment;  
  107. if (is_NS5up) {  
  108. document.getElementById('menuSelect').style.left = SelX+"px";  
  109. } else {  
  110. eval(Lq+'menuSelect'+Sq+'.left=SelX');  
  111. }  
  112. setTimeout('moveOffSelector()',speed);  
  113.    }  
  114. }  
  115. function moveOnSelector() {  
  116. if (SelX < PosX) {   
  117. SelX = SelX + increment;  
  118. if (is_NS5up) {  
  119. document.getElementById('menuSelect').style.left = SelX+"px";  
  120. } else {  
  121. eval(Lq+'menuSelect'+Sq+'.left=SelX');  
  122. }  
  123. setTimeout('moveOnSelector()',speed);  
  124.    }  
  125. }  
  126. </script>
  127. </body>
  128. </html>  
  129. <br>
  130. <a href="https://www.365jz.com">网页代码站</a> - PQ秀秀网！

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (1050人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号