js实现的四级左侧网站分类菜单实例

这篇文章主要介绍了js实现的四级左侧网站分类菜单,实例分析了javascript操作页面元素实现tab切换的相关技巧,需要的朋友可以参考下

本文实例讲述了js实现的四级左侧网站分类菜单。分享给大家供大家参考。具体实现方法如下：

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" xml:lang="en" lang="en"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html;  
6. charset=iso-8859-1"/> 
7. <script src="http://www.google-analytics.com/urchin.js" 
8. type="text/javascript"> 
9. </script> 
10. <script type="text/javascript"> 
11. _uacct = "UA-152060-1"; 
12. urchinTracker(); 
13. </script> 
14. <title>demo</title> 
15. <style type="text/css"> 
16. <!-- 
17. body { 
18. font-family: Arial, Helvetica, sans-serif; 
19. font-size: 11px; 
20. } 
21. #nav, #nav ul { 
22. list-style: none; 
23. background: #F9F9F9; 
24. font-weight: bold; 
25. padding: 0px; 
26. margin: 0px; 
27. border: solid 1px #CCCCCC; 
28. border-bottom: 0px; 
29. width: 150px; 
30. text-align: left; 
31. } 
32. #nav ul ul{ 
33. border: solid 1px #CCCCCC; 
34. border-bottom: 0px; 
35. } 
36. #nav a { 
37. display: block; 
38. width: 150px; 
39. w/idth: 140px; 
40. color: #333333; 
41. text-decoration: none; 
42. text-align: center; 
43. border-bottom: solid 1px #CCCCCC; 
44. text-align: left; 
45. padding-left: 10px; 
46. } 
47. #nav a:hover{ 
48. color: #336666; 
49. } 
50. #nav a.selected{ 
51. background: url(/images/bb_expand.gif) no-repeat right 50%; 
52. } 
53. #nav li { 
54. line-height: 22px; 
55. position: relative; 
56. } 
57. #nav li ul { 
58. position: absolute; 
59. left: -999em; 
60. width: 150px; 
61. font-weight: normal; 
62. margin: 0px; 
63. padding: 0px; 
64. } 
65. #nav li li { 
66. width: 150px; 
67. } 
68. #nav li ul a { 
69. width: 150px; 
70. w/idth: 126px; 
71. padding: 0px 12px; 
72. line-height: 22px; 
73. text-align: left; 
74. } 
75. #nav li ul ul { 
76. margin: 0px 0 0 150px; 
77. } 
78. #nav li:hover ul ul,#nav li.sfhover ul ul,#nav li:hover ul ul ul{ 
79. left: -999em; 
80. } 
81. #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul,#nav li li li:hover ul 
82. { 
83. left: auto; 
84. } 
85. #nav li:hover ul,#nav li.sfhover ul{ 
86. left: 150px; 
87. top: 0px; 
88. } 
89. #nav li:hover, #nav li.sfhover { 
90. background: #F5E3C0; 
91. } 
92. * html #nav li { 
93. float: left; 
94. height: 1%; 
95. } 
96. * html #nav li a { 
97. height: 1%;  
98. } 
99. --> 
100. </style> 
101. <script type="text/javascript"> 
102. <!--//--><![CDATA[//><!-- 
103. sfHover = function() { 
104. var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
105. for (var i=0; i<sfEls.length; i++) { 
106. sfEls[i].onmouseover=function() { 
107. this.className+=" sfhover"; 
108. } 
109. sfEls[i].onmouseout=function() { 
110. this.className=this.className.replace(new RegExp(" sfhover//b"),""); 
111. } 
112. } 
113. } 
114. if (window.attachEvent) window.attachEvent("onload", sfHover); 
115. //--><!]]> 
116. </script> 
117. </head> 
118. <body> 
119. <p><a href="javascript:history.back()">Back</a></p> 
120. <ul id="nav"> 
121. <li><a href="">Home</a></li> 
122. <li><a href="/aboutme.html">About Me</a></li> 
123. <li><a class="selected" href="/tutorials.html">Tutorials</a> 
124. <ul> 
125. <li><a href="#">Sub Menu 31</a></li> 
126. <li><a class="selected" href="#">Sub Menu 32</a> 
127. <ul> 
128. <li><a class="selected"href="#">Sub Menu 321</a><ul> 
129. <li><a href="#">Sub Menu 321</a></li> 
130. </ul></li> 
131. <li><a href="#">Sub Menu 322</a></li> 
132. <li><a href="#">Sub Menu 323</a></li> 
133. <li><a class="selected"href="#">Sub Menu 324</a><ul> 
134. <li><a href="#">Sub Menu 321</a></li> 
135. <li><a href="#">Sub Menu 322</a></li> 
136. <li><a href="#">Sub Menu 323</a></li> 
137. <li><a href="#">Sub Menu 324</a></li> 
138. </ul></li> 
139. </ul> 
140. </li> 
141. <li><a href="#">Sub Menu 33</a></li> 
142. <li><a href="#">Sub Menu 34</a></li> 
143. </ul> 
144. </li> 
145. <li><a class="selected" href="/gallery/gallery.html">Gallery</a> 
146. <ul> 
147. <li><a href="#">Sub Menu 41</a></li> 
148. <li><a class="selected" href="#">Sub Menu 42</a> 
149. <ul> 
150. <li><a href="#">Sub Menu 421</a></li> 
151. <li><a href="#">Sub Menu 422</a></li> 
152. <li><a href="#">Sub Menu 423</a></li> 
153. <li><a href="#">Sub Menu 424</a></li> 
154. </ul> 
155. </li> 
156. <li><a href="#">Sub Menu 43</a></li> 
157. <li><a href="#">Sub Menu 44</a></li> 
158. </ul> 
159. </li> 
160. <li><a href="#">Contact Me</a></li> 
161. </ul> 
162. </body> 
163. </html> 

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