官方淘宝店 易迪拓培训 旧站入口
首页 > 仿真设计 > 射频仿真设计学习 > 滑出式菜单效果

滑出式菜单效果

05-08

  1. <html>

  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>网页特效|Linkweb.cn/Js|---滑出式菜单</title>
  5. <style>
  6. <!--
  7. #ssm2 A {
  8. color:black;
  9. text-decoration:none;
  10. font-size:12;
  11. font-family:verdana;
  12. }

  13. #ssm2 A:hover {
  14. color:red;
  15. }


  16. -->
  17. </style>
  18. </head>

  19. <body>

  20. <script language="JavaScript">

  21. function MM_displayStatusMsg(msgStr) {
  22. status=msgStr;
  23. document.MM_returnValue = true;
  24. }

  25. function highlight(x){
  26. document.forms[x].elements[0].focus()
  27. document.forms[x].elements[0].select()
  28. }

  29. function MM_jumpMenu(targ,selObj,restore){
  30. eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  31. if (restore) selObj.selectedIndex=0;
  32. }

  33. var NS
  34. IE=document.all;
  35. NS=document.layers;


  36. hdrFontFamily="Verdana";
  37. hdrFontSize="2";
  38. hdrFontColor="white";
  39. hdrBGColor="#666666";
  40. linkFontFamily="Verdana";
  41. linkFontSize="2";
  42. linkBGColor="white";
  43. linkOverBGColor="#CCCCCC";
  44. linkTarget="_top";
  45. YOffset=60;
  46. staticYOffset=20;
  47. menuBGColor="black";
  48. menuIsStatic="no";
  49. menuHeader="大类菜单1"
  50. menuWidth=150; // Must be a multiple of 5!
  51. staticMode="advanced"
  52. barBGColor="#1298fd";
  53. barFontFamily="Verdana";
  54. barFontSize="2";
  55. barFontColor="white";
  56. barText="滑出式菜单";

  57. function moveOut() {
  58. if (window.cancel) {
  59. cancel="";
  60. }

  61. if (window.moving2) {
  62. clearTimeout(moving2);
  63. moving2="";
  64. }
  65. if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
  66. if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
  67. }
  68. if (NS) {
  69. document.ssm2.left += (5%menuWidth);
  70. }

  71. moving1 = setTimeout('moveOut()', 5)
  72. }
  73. else {
  74. clearTimeout(moving1)
  75. }
  76. };

  77. function moveBack() {
  78. cancel = moveBack1()
  79. }
  80. function moveBack1() {
  81. if (window.moving1) {
  82. clearTimeout(moving1)
  83. }

  84. if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
  85. if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
  86. }
  87. if (NS) {
  88. document.ssm2.left -= (5%menuWidth);
  89. }
  90. moving2 = setTimeout('moveBack1()', 5)}
  91. else {
  92. clearTimeout(moving2)
  93. }
  94. };

  95. lastY = 0;
  96. function makeStatic(mode) {
  97. if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
  98. }
  99. if (NS) {winY = window.pageYOffset;var NM=document.ssm2
  100. }
  101. if (mode=="smooth") {
  102. if ((IE||NS) && winY!=lastY) {
  103. smooth = .2 * (winY - lastY);
  104. if(smooth > 0) smooth = Math.ceil(smooth);
  105. else smooth = Math.floor(smooth);
  106. if (IE) NM.pixelTop+=smooth;
  107. if (NS) NM.top+=smooth;
  108. lastY = lastY+smooth;
  109. }
  110. setTimeout('makeStatic("smooth")', 1)
  111. }

  112. else if (mode=="advanced") {
  113. if ((IE||NS) && winY>YOffset-staticYOffset) {
  114. if (IE) {NM.pixelTop=winY+staticYOffset
  115. }
  116. if (NS) {NM.top=winY+staticYOffset
  117. }
  118. }
  119. else {
  120. if (IE) {NM.pixelTop=YOffset
  121. }
  122. if (NS) {NM.top=YOffset-7
  123. }
  124. }
  125. setTimeout('makeStatic("advanced")', 1)
  126. }
  127. }

  128. function init() {
  129. if (IE) {
  130. ssm2.style.pixelLeft = -menuWidth;
  131. ssm2.style.visibility = "visible"
  132. }
  133. else if (NS) {
  134. document.ssm2.left = -menuWidth;
  135. document.ssm2.visibility = "show"
  136. }
  137. else {
  138. alert('Choose either the "smooth" or "advanced" static modes!')
  139. }
  140. }


  141. function MM_displayStatusMsg(msgStr) {
  142. status=msgStr;
  143. document.MM_returnValue = true;
  144. }
  145. </script>

  146. <script language="JavaScript">
  147. if (IE) {document.write('<div ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
  148. if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
  149. tempBar=""
  150. for (i=0;i<barText.length;i++) {
  151. tempBar+=barText.substring(i, i+1)+"<BR>"}
  152. document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
  153. function addItem(text, link, target) {
  154. if (!target) {target=linkTarget}
  155. document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
  156. function addHdr(text) {
  157. document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}

  158. //Only edit the script between HERE

  159. addItem(' 小类菜单1', '#', '_blank');
  160. addItem(' 小类菜单2', '#', '_blank');
  161. addItem(' 小类菜单3', '#', '_blank');
  162. addItem(' 小类菜单4', '#', '_blank');
  163. addItem(' 小类菜单5', '#', '_blank');
  164. addItem(' 小类菜单6', '#', '_blank');
  165. addHdr('大类菜单2');
  166. addItem(' 小类菜单1', '#', '_blank');
  167. addItem(' 小类菜单2', '#', '_blank');
  168. addItem(' 小类菜单3', '#', '_blank');
  169. addItem(' 小类菜单4', '#', '_blank');
  170. addItem(' 小类菜单5', '#', '_blank');
  171. addItem(' 小类菜单6', '#', '_blank');


  172. // and HERE! No more!

  173. document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
  174. if (IE) {document.write('</div>')}
  175. if (NS) {document.write('</LAYER>')}
  176. if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}

  177. </script>
  178. <script>
  179. window.onload=init
  180. </script>

  181. </body>
  182. </html>

复制代码

Top