verschachtelte navigation


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  3.  
  4. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5. <title>Navigation</title>
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. *
  9. {
  10. margin: 0;
  11. padding: 0;
  12. }
  13.  
  14. body
  15. {
  16. height: 100%;
  17. }
  18.  
  19. ul
  20. {
  21. position: relative;
  22. width: 185px;
  23. background: white;
  24. }
  25.  
  26. ul li
  27. {
  28. list-style-type: none;
  29. width: 185px;
  30. }
  31.  
  32. ul li a
  33. {
  34. display: block;
  35. width: 185px;
  36. padding-top: 30px;
  37. padding-bottom: 30px;
  38. border-bottom: 1px solid #efefef;
  39. }
  40.  
  41. ul li a span
  42. {
  43. display: block;
  44. margin-left: 20px;
  45. }
  46.  
  47. #firstLevel ul li
  48. {
  49. display: block;
  50. background: #cdcdcd;
  51. }
  52.  
  53. #firstLevel ul li a /* style for secondLevel*/
  54. {
  55. border-bottom: 1px solid black;
  56. background: #8c624a;
  57.  
  58. }
  59.  
  60. #secondLevel ul li a /* style for thirdLevel*/
  61. {
  62. background: #469b4a;
  63. }
  64.  
  65. #thirdLevel ul li a /* style for fourthLevel*/
  66. {
  67. background: #466a9b;
  68. }
  69.  
  70. #firstLevel ul li a span /* style for secondLevel*/
  71. {
  72. margin-left: 30px;
  73. }
  74.  
  75. #secondLevel ul li a span /* style for thirdLevel*/
  76. {
  77. margin-left: 40px;
  78. }
  79.  
  80. #thirdLevel ul li a span /* style for fourthLevel*/
  81. {
  82. margin-left: 50px;
  83. }
  84.  
  85. /* span {
  86. left: -1000px;
  87. top: -1000px;
  88. overflow: hidden;
  89. position: absolute;
  90. } */
  91.  
  92. /*]]>*/
  93. </style>
  94. </head>
  95. <ul id="firstLevel"><!-- first level -->
  96. <li><a href="#" title="blank link 1"><span>link1</span><!--<br />--></a></li>
  97. <li><a href="#" title="blank link 1"><span>link1</span><!--<br />--></a></li>
  98. <li><a href="#" title="blank link 1"><span>link1</span><!--<br />--></a></li>
  99. <li><a href="#" title="blank link 1"><span>link2</span><!--<br />--></a>
  100. <ul id="secondLevel"><!-- second level -->
  101. <li><a href="#" title="blank link 2"><span>link2</span><!--<br />--></a></li>
  102. <li><a href="#" title="blank link 2"><span>link2</span><!--<br />--></a></li>
  103. <li><a href="#" title="blank link 2"><span>link2</span><!--<br />--></a></li>
  104. <li><a href="#" title="blank link 3"><span>link3</span><!--<br />--></a>
  105. <ul id="thirdLevel"><!-- third level -->
  106. <li><a href="#" title="blank link 3"><span>link3</span><!--<br />--></a></li>
  107. <li><a href="#" title="blank link 3"><span>link3</span><!--<br />--></a></li>
  108. <li><a href="#" title="blank link 3"><span>link3</span><!--<br />--></a></li>
  109. <li><a href="#" title="blank link 4"><span>link4</span><!--<br />--></a>
  110. <ul id="fourthLevel"><!-- fourth level -->
  111. <li><a href="#" title="blank link 4"><span>link4</span><!--<br />--></a></li>
  112. <li><a href="#" title="blank link 4"><span>link4</span><!--<br />--></a></li>
  113. <li><a href="#" title="blank link 4"><span>link4</span><!--<br />--></a></li>
  114. </ul><!-- fourth level -->
  115. </li>
  116. </ul><!-- third level -->
  117. </li>
  118. </ul><!-- second level -->
  119. </li>
  120. <li><a href="#" title="blank link 1"><span>link6</span><!--<br />--></a></li>
  121. <li><a href="#" title="blank link 1"><span>link1</span><!--<br />--></a></li>
  122. <li><a href="#" title="blank link 1"><span>link1</span><!--<br />--></a></li>
  123. </ul>
  124. </body>
  125. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.