Logo der TYPO3 Usergruppe Leipzig

Hier ein Snippet für die Erstellung eines Drop Down Listenmenüs ohne Java Script.

Eine Live Demo befindet sich unter www.steudte-kaffee.de

Drop Down Listenmenü ohne JavaScript
  1. temp.menu.main = HMENU
  2. temp.menu.main {
  3. entryLevel = 0
  4. excludeUidList = 35
  5. wrap = |
  6. # Hauptmenue
  7. 1 = TMENU
  8. 1 {
  9. wrap = <ul> | </ul>
  10. expAll = 1
  11. NO.ATagTitle.field = subtitle//title
  12. NO.wrapItemAndSub = <li> | </li>
  13. IFSUB = 1
  14. IFSUB {
  15. wrapItemAndSub = <li> | </li>
  16. allWrap = | <!--<![endif]-->
  17. linkWrap = |<!--[if IE 7]><!-->
  18. ATagBeforeWrap = 1
  19. }
  20. }
  21. 2 = TMENU
  22. 2 {
  23. wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  24. expAll = 1
  25. NO.ATagTitle.field = subtitle//title
  26. NO.wrapItemAndSub = <li> | </li>
  27. IFSUB = 1
  28. IFSUB {
  29. wrapItemAndSub = <li> | </li>
  30. allWrap = | <!--<![endif]-->
  31. linkWrap = |<!--[if IE 7]><!-->
  32. ATagBeforeWrap = 1
  33. ATagParams = class=drop
  34. }
  35. }
  36. 3 < .2
  37. 4 < .2
  38. }
  39.  
  40. #einbinden in maintemplate
  41.  
  42. lib.menuMain < temp.menu.main
CSS Code für Menu
  1. .menu {
  2. width : 750px;
  3. float : left;
  4. margin : 0;
  5. padding : 0;
  6. text-align : right;
  7. border-bottom : 5px solid #fff;
  8. background : #D0A707;
  9. z-index : 100;
  10. color:#000;
  11. }
  12.  
  13. .menu ul {
  14. padding : 0;
  15. margin : 0;
  16. list-style-type : none;
  17. }
  18.  
  19. .menu ul ul {
  20. width : 150px;
  21. }
  22.  
  23. .menu li {
  24. float : left;
  25. width : 150px;
  26. position : relative;
  27. }
  28.  
  29. .menu a {
  30. display : block;
  31. font-size : 0.9em;
  32. text-decoration : none;
  33. color : #000;
  34. width : 139px;
  35. height : 30px;
  36. border : solid #fff;
  37. border-width : 0 1px 1px 0;
  38. background : #D0A707;
  39. padding-right : 10px;
  40. line-height : 29px;
  41. font-weight : bold;
  42. }
  43.  
  44.  
  45. .menu ul ul a.drop, .menu ul ul a.drop:visited {
  46. background : #D0A707;
  47. }
  48.  
  49. .menu ul ul a.drop:hover {
  50. background : #D0A707;
  51. }
  52.  
  53. .menu ul ul :hover > a.drop {
  54. background : #D0A707;
  55. }
  56.  
  57. .menu ul ul ul a, .menu ul ul ul a:visited {
  58. background : #D0A707;
  59. }
  60.  
  61. .menu ul ul ul a:hover {
  62. background : #D0A707;
  63. }
  64.  
  65. .menu ul ul {
  66. visibility : hidden;
  67. position : absolute;
  68. height : 0;
  69. top : 31px;
  70. left : 0;
  71. width : 150px;
  72. }
  73.  
  74. * html .menu ul ul {
  75. top : 30px;
  76. }
  77.  
  78. .menu ul ul ul {
  79. left : 150px;
  80. top : 0;
  81. width : 150px;
  82. }
  83.  
  84. .menu table {
  85. position : absolute;
  86. top : 0;
  87. left : 0;
  88. }
  89.  
  90. .menu ul ul a {
  91. background : #D0A707;
  92. color : #000;
  93. height : auto;
  94. padding : 0 10px 0 10px;
  95. width : 129px;
  96. }
  97.  
  98. * html .menu ul ul a {
  99. width : 150px;
  100. width : 129px;
  101. }
  102.  
  103. .menu a:hover {
  104. color : #fff;
  105. background : #999;
  106. }
  107.  
  108. .menu :hover > a {
  109. color : #fff;
  110. background : #999;
  111. }
  112.  
  113. .menu ul li:hover ul, .menu ul a:hover ul {
  114. visibility : visible;
  115. }
  116.  
  117. .menu ul :hover ul ul {
  118. visibility : hidden;
  119. }
  120.  
  121. .menu ul :hover ul :hover ul {
  122. visibility : visible;
  123. }
Autor:

Keine Artikel in dieser Ansicht.