[转帖][网页标准化]符合W3C标准的CSS导航菜单（用LI+JS实现无限分类）

1. <style type="text/css">
2. /*Credits: Dynamic Drive CSS Library */
3. /*URL: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a> */
4. .suckertreemenu ul{
5. margin: 0;
6. padding: 0;
7. list-style-type: none;
8. }
9. /*Top level list items*/
10. .suckertreemenu ul li{
11. position: relative;
12. display: inline;
13. float: left;
14. background-color: &#35;F3F3F3; /*overall menu background color*/
15. }
16. /*Top level menu link items style*/
17. .suckertreemenu ul li a{
18. display: block;
19. width: 90px; /*Width of top level menu link items*/
20. padding: 1px 8px;
21. border: 1px solid black;
22. border-left-width: 0;
23. text-decoration: none;
24. color: navy;
25. }
26. /*1st sub level menu*/
27. .suckertreemenu ul li ul{
28. left: 0;
29. position: absolute;
30. top: 1em; /* no need to change, as true value set by script */
31. display: block;
32. visibility: hidden;
33. }
34. /*Sub level menu list items (undo style from Top level List Items)*/
35. .suckertreemenu ul li ul li{
36. display: list-item;
37. float: none;
38. }
39. /*All subsequent sub menu levels offset after 1st level sub menu */
40. .suckertreemenu ul li ul li ul{
41. left: 159px; /* no need to change, as true value set by script */
42. top: 0;
43. }
44. /* Sub level menu links style */
45. .suckertreemenu ul li ul li a{
46. display: block;
47. width: 160px; /*width of sub menu levels*/
48. color: navy;
49. text-decoration: none;
50. padding: 1px 5px;
51. border: 1px solid &#35;ccc;
52. }
53. .suckertreemenu ul li a:hover{
54. background-color: black;
55. color: white;
56. }
57. /*Background image for top level menu list links */
58. .suckertreemenu .mainfoldericon{
59. background: &#35;F3F3F3 url(media/arrow-down.gif) no-repeat center right;
60. }
61. /*Background image for subsequent level menu list links */
62. .suckertreemenu .subfoldericon{
63. background: &#35;F3F3F3 url(media/arrow-right.gif) no-repeat center right;
64. }
65. * html p&#35;iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in
66. IE*/
67. padding-top: 1em;
68. }
69. /* Holly Hack for IE \*/
70. * html .suckertreemenu ul li { float: left; height: 1%; }
71. * html .suckertreemenu ul li a { height: 1%; }
72. /* End */
73. </style>
74. <script type="text/javascript">
75. //SuckerTree Horizontal Menu (Sept 14th, 06)
76. //By Dynamic Drive: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a>
77. var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
78. function buildsubmenus_horizontal(){
79. for (var i=0; i<menuids.length; i++){
80. var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
81. for (var t=0; t<ultags.length; t++){
82. if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
83. ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level
84. submenus to be height of main menu item
85. ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
86. }
87. else{ //else if this is a sub level menu (ul)
88. ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right
89. of menu item that activated it
90. ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
91. }
92. ultags[t].parentNode.onmouseover=function(){
93. this.getElementsByTagName("ul")[0].style.visibility="visible"
94. }
95. ultags[t].parentNode.onmouseout=function(){
96. this.getElementsByTagName("ul")[0].style.visibility="hidden"
97. }
98. }
99. }
100. }
101. if (window.addEventListener)
102. window.addEventListener("load", buildsubmenus_horizontal, false)
103. else if (window.attachEvent)
104. window.attachEvent("onload", buildsubmenus_horizontal)
105. </script>
106. <div class="suckertreemenu">
107. <ul id="treemenu1">
108. <li><a href="&#35;" style="border-left: 1px solid black">Item 1</a></li>
109. <li><a href="&#35;">Item 2</a></li>
110. <li><a href="&#35;">Folder 1</a>
111. <ul>
112. <li><a href="&#35;">Sub Item 1.1</a></li>
113. <li><a href="&#35;">Sub Item 1.2</a></li>
114. <li><a href="&#35;">Sub Item 1.3</a></li>
115. <li><a href="&#35;">Sub Item 1.4</a></li>
116. </ul>
117. </li>
118. <li><a href="&#35;">Item 3</a></li>
119. <li><a href="&#35;">Folder 2</a>
120. <ul>
121. <li><a href="&#35;">Sub Item 2.1</a></li>
122. <li><a href="&#35;">Folder 2.1</a>
123. <ul>
124. <li><a href="&#35;">Sub Item 2.1.1</a></li>
125. <li><a href="&#35;">Sub Item 2.1.2</a></li>
126. <li><a href="&#35;">Sub Item 2.1.3</a></li>
127. <li><a href="&#35;">Sub Item 2.1.4</a></li>
128. </ul>
129. </li>
130. </ul>
131. </a>
132. </li>
133. <li><a href="&#35;">Item 4</a></li>
134. </ul>
135. <br style="clear: left;" />
136. </div>
137. <p id="iepara">Rest of content here</p>

复制代码

纵向导航

1. <style type="text/css">
2. /*Credits: Dynamic Drive CSS Library */
3. /*URL: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a> */
4. .suckerdiv ul{
5. margin: 0;
6. padding: 0;
7. list-style-type: none;
8. width: 160px; /* Width of Menu Items */
9. border-bottom: 1px solid &#35;ccc;
10. }
11. .suckerdiv ul li{
12. position: relative;
13. }
14. /*Sub level menu items */
15. .suckerdiv ul li ul{
16. position: absolute;
17. width: 170px; /*sub menu width*/
18. top: 0;
19. visibility: hidden;
20. }
21. /* Sub level menu links style */
22. .suckerdiv ul li a{
23. display: block;
24. overflow: auto; /*force hasLayout in IE7 */
25. color: black;
26. text-decoration: none;
27. background: &#35;fff;
28. padding: 1px 5px;
29. border: 1px solid &#35;ccc;
30. border-bottom: 0;
31. }
32. .suckerdiv ul li a:visited{
33. color: black;
34. }
35. .suckerdiv ul li a:hover{
36. background-color: yellow;
37. }
38. .suckerdiv .subfolderstyle{
39. background: url(media/arrow-list.gif) no-repeat center right;
40. }
42. /* Holly Hack for IE \*/
43. * html .suckerdiv ul li { float: left; height: 1%; }
44. * html .suckerdiv ul li a { height: 1%; }
45. /* End */
46. </style>
47. <script type="text/javascript">
48. //SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
49. //By Dynamic Drive: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/</a>
50. var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
51. function buildsubmenus(){
52. for (var i=0; i<menuids.length; i++){
53. var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
54. for (var t=0; t<ultags.length; t++){
55. ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
56. if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
57. ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
58. else //else if this is a sub level submenu (ul)
59. ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
60. ultags[t].parentNode.onmouseover=function(){
61. this.getElementsByTagName("ul")[0].style.display="block"
62. }
63. ultags[t].parentNode.onmouseout=function(){
64. this.getElementsByTagName("ul")[0].style.display="none"
65. }
66. }
67. for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
68. ultags[t].style.visibility="visible"
69. ultags[t].style.display="none"
70. }
71. }
72. }
73. if (window.addEventListener)
74. window.addEventListener("load", buildsubmenus, false)
75. else if (window.attachEvent)
76. window.attachEvent("onload", buildsubmenus)
77. </script>
78. <div class="suckerdiv">
79. <ul id="suckertree1">
80. <li><a href="&#35;">Item 1</a></li>
81. <li><a href="&#35;">Item 2</a></li>
82. <li><a href="&#35;">Folder 1</a>
83. <ul>
84. <li><a href="&#35;">Sub Item 1.1</a></li>
85. <li><a href="&#35;">Sub Item 1.2</a></li>
86. </ul>
87. </li>
88. <li><a href="&#35;">Item 3</a></li>
89. <li><a href="&#35;">Folder 2</a>
90. <ul>
91. <li><a href="&#35;">Sub Item 2.1</a></li>
92. <li><a href="&#35;">Folder 2.1</a>
93. <ul>
94. <li><a href="&#35;">Sub Item 2.1.1</a></li>
95. <li><a href="&#35;">Sub Item 2.1.2</a></li>
96. <li><a href="&#35;">Sub Item 2.1.3</a></li>
97. <li><a href="&#35;">Sub Item 2.1.4</a></li>
98. </ul>
99. </li>
100. </ul>
101. </li>
102. <li><a href="&#35;">Item 4</a></li>
103. </ul>
104. </div>

复制代码