javascript简单实现滑动菜单效果的方法

这篇文章主要介绍了javascript简单实现滑动菜单效果的方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javascript简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下：

整个javascript代码共42行，其中主要函数Slide代码26行,可以改进哦!

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>滑动菜单</title> 
7. <style> 
8. a,body,div,h1,h2,li,ul{ 
9. margin:0; 
10. padding:0 
11. } 
12. a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;} 
13. a:hover{color:#123;background-color:#789;font-weight:bold;} 
14. body{ 
15. font:12px/18px "Times New Roman",Times,"宋体",serif; 
16. text-align:center; 
17. } 
18. h1{ 
19. height:100px; 
20. width:25px; 
21. position:absolute; 
22. top:-1px; 
23. left:123px; 
24. cursor:pointer; 
25. color:#89A; 
26. font-size:18px;  
27. line-height:50px; 
28. background-color:#234; 
29. } 
30. h2{ 
31. height:24px; 
32. font-size:12px; 
33. border-bottom:1px solid #4C6CB9; 
34. color:#BBB; 
35. font-weight:600; 
36. cursor:pointer; 
37. } 
38. li{height:25px;list-style:none} 
39. #Container{width:800px;background-color:#DDD;border: 1px solid #999;margin:10px auto} 
40. #Top{height:30px;background-color:#DDD;border: 1px solid #999;} 
41. #Logo{height:100px;background-color:#DDD;border: 1px solid #999;} 
42. #Nav{height:30px;background-color:#DDD;border: 1px solid #999;} 
43. #SideBar{ 
44. position:fixed!important; 
45. position:absolute; 
46. top:200px; 
47. left:0px; 
48. } 
49. #SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px} 
50. #Main{height:800px;background-color:#DDD;border: 1px solid #999;} 
51. #Footer{height:60px;background-color:#DDD;border: 1px solid #999;} 
52. .Extracted{width:0px;} 
53. .Extrended{border:1px solid #555;background-color:#000;padding:1px} 
54. </style> 
55. </head> 
56. <body> 
57. <div id="Container"> 
58. <div id="Top">顶条</div> 
59. <div id="Logo">Logo</div> 
60. <div id="Nav">导航条</div> 
61. <div id="SideBar" class="Extrended"> 
62. <h1>菜单</h1> 
63. <ul> 
64. <h2>功能栏1</h2> 
65. <li><a href="">功能1</a></li> 
66. <li><a href="">功能2</a></li> 
67. <li><a href="">功能3</a></li> 
68. <li><a href="">功能4</a></li> 
69. <li><a href="">功能5</a></li> 
70. </ul> 
71. <ul> 
72. <h2>功能栏2</h2> 
73. <li><a href="">功能1</a></li> 
74. <li><a href="">功能2</a></li> 
75. <li><a href="">功能3</a></li> 
76. <li><a href="">功能4</a></li> 
77. <li><a href="">功能5</a></li> 
78. </ul> 
79. <ul> 
80. <h2>功能栏3</h2> 
81. <li><a href="">功能1</a></li> 
82. <li><a href="">功能2</a></li> 
83. <li><a href="">功能3</a></li> 
84. <li><a href="">功能4</a></li> 
85. <li><a href="">功能5</a></li> 
86. </ul> 
87. <ul> 
88. <h2>功能栏4</h2> 
89. <li><a href="">功能1</a></li> 
90. <li><a href="">功能2</a></li> 
91. <li><a href="">功能3</a></li> 
92. <li><a href="">功能4</a></li> 
93. <li><a href="">功能5</a></li> 
94. </ul> 
95. <ul> 
96. <h2>功能栏5</h2> 
97. <li><a href="">功能1</a></li> 
98. <li><a href="">功能2</a></li> 
99. <li><a href="">功能3</a></li> 
100. <li><a href="">功能4</a></li> 
101. <li><a href="">功能5</a></li> 
102. </ul> 
103. <ul> 
104. <h2>功能栏6</h2> 
105. <li><a href="">功能1</a></li> 
106. <li><a href="">功能2</a></li> 
107. <li><a href="">功能3</a></li> 
108. <li><a href="">功能4</a></li> 
109. <li><a href="">功能5</a></li> 
110. </ul> 
111. </div> 
112. <div id="Main">内容区</div> 
113. <div id="Footer">底条</div> 
114. </div> 
115. <script type="text/javascript"> 
116. function $(e){return document.getElementById(e)} 
117. function Slide(Element,Mod){ 
118. var LongthMax,LongthMin,Property,Count=25,Accum,ID,Dlt,DltDlt; 
119. if(Mod){ 
120. Property='left'; 
121. LongthMax=0; 
122. LongthMin=-124; 
123. } 
124. else{ 
125. Property='height'; 
126. LongthMax=Element.children.length*25; 
127. LongthMin=25; 
128. } 
129. DltDlt=(LongthMax-LongthMin)/(Count*5); 
130. if(Element.style[Property]==LongthMax+'px')DltDlt=-DltDlt; 
131. Accum=parseInt(Element.style[Property]); 
132. Dlt=7*DltDlt; 
133. ID=setInterval(function(){ 
134. if(Count--){ 
135. if(!(Count%5))Dlt-=DltDlt; 
136. Accum+=Dlt; 
137. Element.style[Property]=Math.floor(Accum)+'px'; 
138. return 
139. } 
140. clearInterval(ID); 
141. Element.style[Property]=(DltDlt>0)? LongthMax+'px':LongthMin+'px'; 
142. },20); 
143. } 
144. $('SideBar').style.left='0px'; 
145. $('SideBar').children[0].onclick=function(){ 
146. Slide(this.parentNode,1); 
147. }; 
148. (function(Menu,i,tmp){ 
149. Menu=document.getElementsByTagName('ul'); 
150. for(i=Menu.length;i--;){ 
151. tmp=Menu[i]; 
152. tmp.style.overflow='hidden'; 
153. tmp.style.height='25px'; 
154. tmp.children[0].onclick=function(){ 
155. Slide(this.parentNode,0); 
156. }; 
157. } 
158. }()); 
159. </script> 
160. </body> 
161. </html> 

希望本文所述对大家的javascript程序设计有所帮助。