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 Q2.11
das nächste TYPO3-Usergruppentreffen findet am 30.05.2011 um 19:00 Uhr im Horns-Erben...
TUGLE Treffen Q1.11
Das erste TUGLE-Treffen 2011 findet am Montag, den 07.03.2011 um 19:00 Uhr in...
TUGLE Treffen Dezember 2010
Wie gestern auf dem interessanten TUGLE-Treffen besprochen, treffen wir uns nächstes Mal bei...

TYPO3 NEWS

Heads first into a new year - January 2012
After an exciting 2011 we have meanwhile completed the first month of 2012. Just like probably everyone else we have some ideas for doing things better than in the past, and this includes...
Restructuring the TYPO3 Association
The organizational structure of the TYPO3 Association isn't a proper fit anymore to the TYPO3 project's own internal structure, nor does it fit the size the project has become over time. A need for...
Security issues in third-party TYPO3 extensions
Security vulnerabilities have been discovered in third-party TYPO3 extensions: css_filelinks, terminal, beuserswitch, rtg_files, irfaq, skt_eurocalc, jftcaforms, bc_post2facebook, aeurltool,...