js代码实现微博导航栏

这篇文章主要介绍了js代码实现微博导航栏的相关资料,需要的朋友可以参考下

微博导航看起来很美观，实现起来也不麻烦，直接写代码了

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta charset="utf-8" /> 
5. <title></title> 
6. <script type="text/javascript"> 
7. var hiddenChild = function(obj) { 
8. var ul = obj.getElementsByTagName("ul")[0]; 
9. ul.style.display = 'none'; 
10. } 
11. /* 
12. *obj表示导航条中的直接li 
13. */ 
14. var showChild = function(obj) { 
15. var ul = obj.getElementsByTagName("ul")[0]; 
16. ul.style.display = 'block'; 
17. } 
18. </script> 
19. <style type="text/css"> 
20. * { 
21. margin: 0px; 
22. padding: 0px 
23. } 
24. /*导航条*/ 
25. #nav { 
26. line-height: 60px; 
27. list-style-type: none; 
28. background-color: #0000FF; 
29. text-align: center; 
30. } 
31. #nav a { 
32. color: white; 
33. text-decoration: none; 
34. display: block; 
35. width: 80px; 
36. font-size: 20px; 
37. font-weight: 800; 
38. } 
39. #nav a:hover { 
40. background-color: #ccc; 
41. } 
42. #nav li { 
43. background-color: blue; 
44. float: left; 
45. color: white; 
46. list-style-type: none; 
47. } 
48. #nav li ul { 
49. position: absolute; 
50. display: none; 
51. width: 130px; 
52. } 
53. .show { 
54. display: block; 
55. } 
56. </style> 
57. </head> 
58. <body> 
59. <ul id="nav"> 
60. <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
61. <a href="#">首页</a> 
62. <ul> 
63. <li> 
64. <a href="#">全部广播</a> 
65. </li> 
66. <li> 
67. <a href="#">好友</a> 
68. </li> 
69. <li> 
70. <a href="#">关注</a> 
71. </li> 
72. </ul> 
73. </li> 
74. <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
75. <a href="#">微频道</a> 
76. <ul> 
77. <li> 
78. <a href="#">微频道1</a> 
79. </li> 
80. <li> 
81. <a href="#">微频道2</a> 
82. </li> 
83. </ul> 
84. </li> 
85. <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
86. <a href="#">找人</a> 
87. <ul> 
88. <li> 
89. <a href="#">明星</a> 
90. </li> 
91. <li> 
92. <a href="#">达人</a> 
93. </li> 
94. </ul> 
95. </li> 
96. <li onmouseover="showChild(this);" onmouseleave="hiddenChild(this);"> 
97. <a href="#">微群</a> 
98. <ul> 
99. <li> 
100. <a href="#">股票</a> 
101. </li> 
102. </ul> 
103. </li> 
104. </ul> 
105. </body> 
106. </html> 

以上代码就是用js实现微博导航栏，需要的朋友可以来参考下。