magnify

The ULTIMATE CSS only drop-down menu

Armin Bartsch, Montag, 01. Juni 2009

Das ULTIMATE CSS only drop-down menu von Stu Nicholls ist ein drop-down Menü was ohne JavaScript funktioniert und in neue oder bestehende Seiten leicht integriert werden kann.

Demo

TypoScript object not found (lib.demo_ts)

Fügen Sie das TypoScript in das Setup Ihres Templates ein, bitte beachten Sie die Kommentare im TS

  1.  
  2. seite.includeCSS.file1000 = final_drop*.css
  3. temp.css_menu = HMENU
  4. temp.css_menu {
  5.   excludeUidList = 64,15
  6.  
  7.   special = directory
  8.   # Hier die Start-ID angeben
  9.   special.value = 5
  10.  
  11.   wrap = <div class="menu"> | </div>
  12.  
  13.   # Hauptmenue
  14.   1 = TMENU
  15.   1 {
  16.     wrap = <ul> | </ul>
  17.     expAll = 1
  18.     NO.ATagTitle.field = subtitle//title
  19.     NO.wrapItemAndSub = <li> | </li>
  20.     NO.stdWrap.prepend = COA
  21.     NO.stdWrap.prepend.10.wrap = ~&nbsp; |
  22.     IFSUB = 1
  23.     IFSUB {
  24.       wrapItemAndSub = <li> | </li>
  25.       allWrap = | <!--<![endif]-->
  26.       linkWrap = |<!--[if IE 7]><!-->
  27.       ATagBeforeWrap = 1
  28.     }
  29.     ACT < .NO
  30.     ACT = 1
  31.     ACT.ATagParams = class=dropact
  32.     ACTIFSUB < .IFSUB
  33.     ACTIFSUB.ATagParams = class=dropact
  34.   }
  35.   2 = TMENU
  36.   2 {
  37.     wrap = <!--[if lte IE 6]><table><tr><td><![endif]--><ul> | </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  38.     expAll = 1
  39.     NO.ATagTitle.field = subtitle//title
  40.     NO.wrapItemAndSub = <li> | </li>
  41.     IFSUB = 1
  42.     IFSUB {
  43.       wrapItemAndSub = <li> | </li>
  44.       allWrap = | <!--<![endif]-->
  45.       linkWrap = |<!--[if IE 7]><!-->
  46.       ATagBeforeWrap = 1
  47.       ATagParams = class=drop
  48.     }
  49.   }
  50.  
  51.   3 < .2
  52.  
  53.   4 < .2
  54.  
  55. }
  56.  
  57. lib.demo_ts < temp.css_menu

Jetzt müssen Sie noch das CSS-File einbinden.

  1. # Das CSS einbinden
  2. seite.includeCSS.file1000 = final_drop*.css

Hier sehen Sie das CSS das ich für das Demo-Menü oben einsetze

TypoScript object not found (lib.demo_ts)
  1. .demo .menu {
  2. width:750px;
  3. font-size:0.85em;
  4. position:relative;
  5. z-index:100;
  6. }
  7. /* remove all the bullets, borders and padding from the default list styling */
  8. .demo .menu ul {
  9. padding:0;
  10. margin:0;
  11. list-style-type:none;
  12. }
  13. .demo .menu ul ul {
  14. width:150px;
  15. }
  16. /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
  17. .demo .menu li {
  18. float:left;
  19. width:150px;
  20. position:relative;
  21. }
  22. /* style the links for the top level */
  23. .demo .menu a, .demo .menu a:visited {
  24. display:block;
  25. font-size:11px;
  26. text-decoration:none;
  27. color:#fff;
  28. width:139px;
  29. height:30px;
  30. border:1px solid #fff;
  31. border-width:1px 1px 0 0;
  32. background:#758279;
  33. padding-left:10px;
  34. line-height:29px;
  35. }
  36. /* a hack so that IE5.5 faulty box model is corrected */
  37. * html .demo .menu a, * html .demo .menu a:visited {
  38. width:150px;
  39. w\idth:139px;
  40. }
  41.  
  42. /* style the second level background */
  43. .demo .menu ul ul a.drop, .demo .menu ul ul a.drop:visited {
  44. background:#d4d8bd url(../../graphics/drop.gif) bottom right no-repeat;
  45.  
  46. }
  47. /* style the second level hover */
  48. .demo .menu ul ul a.drop:hover{
  49. background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
  50. }
  51. .demo .menu ul ul :hover > a.drop {
  52. background:#c9ba65 url(../../graphics/drop.gif) bottom right no-repeat;
  53. }
  54. /* style the third level background */
  55. .demo .menu ul ul ul a, .demo .menu ul ul ul a:visited {
  56. background:#e2dfa8;
  57. }
  58. /* style the third level hover */
  59. .demo .menu ul ul ul a:hover {
  60. background:#b2ab9b;
  61. }
  62.  
  63.  
  64. /* hide the sub levels and give them a positon absolute so that they take up no room */
  65. .demo .menu ul ul {
  66. visibility:hidden;
  67. position:absolute;
  68. height:0;
  69. top:31px;
  70. left:0;
  71. width:150px;
  72. }
  73. /* another hack for IE5.5 */
  74. * html .demo .menu ul ul {
  75. top:30px;
  76. t\op:31px;
  77. }
  78.  
  79. /* position the third level flyout menu */
  80. .demo .menu ul ul ul{
  81. left:150px;
  82. top:0;
  83. width:150px;
  84. }
  85. /* position the third level flyout menu for a left flyout */
  86. .demo .menu ul ul ul.left {
  87. left:-150px;
  88. }
  89.  
  90. /* style the table so that it takes no ppart in the layout - required for IE to work */
  91. .demo .menu table {position:absolute; top:0; left:0;}
  92.  
  93. /* style the second level links */
  94. .demo .menu ul ul a, .demo .menu ul ul a:visited {
  95. background:#d4d8bd;
  96. color:#000;
  97. height:auto;
  98. line-height:1em;
  99. padding:5px 10px;
  100. width:129px
  101. /* yet another hack for IE5.5 */
  102. }
  103. * html .demo .menu ul ul a{
  104. width:150px;
  105. w\idth:129px;
  106. }
  107.  
  108.  
  109. /* style the top level hover */
  110. .demo .menu a:hover, .demo .menu ul ul a:hover{
  111. color:#fff;
  112. background:#949e7c;
  113. }
  114. .demo .menu :hover > a, .demo .menu ul ul :hover > a {
  115. color:#fff;
  116. background:#949e7c;
  117. }
  118.  
  119. /* make the second level visible when hover on first level list OR link */
  120. .demo .menu ul li:hover ul,
  121. .demo .menu ul a:hover ul{
  122. visibility:visible;
  123. }
  124. /* keep the third level hidden when you hover on first level list OR link */
  125. .demo .menu ul :hover ul ul{
  126. visibility:hidden;
  127. }
  128.  
  129. /* make the third level visible when you hover over second level list OR link */
  130. .demo .menu ul :hover ul :hover ul{
  131. visibility:visible;
  132. }
magnify

Kommentare

Ins Gästebuch eintragen
Kein Kommentar vorhanden

Snippets

MERKLISTE

Login

Anmelden

Sponsored by:

ideenwerft webhosting

Wunschzettel