Board logo

标题: [转帖][网页标准化]符合W3C标准的CSS导航菜单（用LI+JS实现无限分类） [打印本页]
作者: chinanic    时间: 2007-1-22 07:08     标题: [转帖][网页标准化]符合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>
复制代码
作者: chinanic    时间: 2007-1-22 07:10     标题: [转帖][网页标准化]符合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. .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>
复制代码




欢迎光临 黑色海岸线论坛 (http://bbs.thysea.com/) Powered by Discuz! 7.2