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.                
  12.                 NO.ATagTitle.field = subtitle//title
  13.                 NO.wrapItemAndSub = <li> | </li>
  14.                
  15.                
  16.         IFSUB = 1
  17.                 IFSUB {
  18.                         wrapItemAndSub = <li> | </li>
  19.                         allWrap = | <!--<![endif]-->
  20.                         linkWrap = |<!--[if IE 7]><!-->
  21.                   ATagBeforeWrap = 1
  22.                 }
  23.         }
  24.        
  25.         2 = TMENU
  26.         2 {
  27.                 wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  28.                 expAll = 1
  29.                
  30.                 NO.ATagTitle.field = subtitle//title
  31.                 NO.wrapItemAndSub = <li> | </li>
  32.                
  33.                 IFSUB = 1
  34.                 IFSUB {
  35.                         wrapItemAndSub = <li> | </li>
  36.                         allWrap = | <!--<![endif]-->
  37.                         linkWrap = |<!--[if IE 7]><!-->
  38.                   ATagBeforeWrap = 1
  39.                         ATagParams = class=drop
  40.                 }
  41.        
  42.         }
  43.        
  44.         3 < .2
  45.         4 < .2
  46. }
  47.  
  48. #einbinden in maintemplate
  49.  
  50. 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. }
  124.
Autor:

TUGLE TERMINE

TUGLE Treffen April 2010
Wie gestern auf dem interessanten TUGLE-Treffen besprochen, treffen wir uns nächstes Mal wieder...
TUGLE Treffen Februar 2010
Montag, 22.02.2010, 19:00 Uhr Burg Giebichenstein Hochschule für Kunst und Design,...
TUGLE Treffen Dezember 2009
Nach einer kleinen Pause findet im Dezember das nächste TUGLE-Treffen statt. Wir treffen uns...

TYPO3 NEWS

Packt Publishing Launches the Open Source Awards
Packt Publishing has recently announced the Open Source Awards for 2010. TYPO3 is nominated for the Open Source CMS category
Security issues in third-party TYPO3 extensions
Security vulnerabilities have been discovered in third-party TYPO3 extensions "Commenting system Backend Module" (commentsbe), "Tiny Market" (hm_tinymarket), "Yet Another Calendar" (ke_yac), "The...
Hans J. Martin lost his life
Dear community, Monday last week Hans J. Martin, Managing Director of e-netconsulting KG, Hamburg died at the age of 34 years by a tragical accident. He was co-founder of the TYPO3camp idea and...