Layermenü ohne Javascript

Typoscript

  1. lib.layermenu2 = HMENU
  2. lib.layermenu2 {
  3.   wrap = <div class="menu"> | </div>
  4.  
  5.   # Ebene 1
  6.   1 = TMENU
  7.   1 {
  8.     wrap = <ul> | </ul>
  9.     expAll = 1
  10.     noBlur = 1
  11.     NO.ATagTitle.field = subtitle//title
  12.     NO.wrapItemAndSub = <li> | </li>
  13.     NO.stdWrap.prepend = COA
  14.     NO.stdWrap.prepend.10.wrap = ~  |
  15.     IFSUB = 1
  16.     IFSUB {
  17.       wrapItemAndSub = <li> | </li>
  18.       allWrap = | <!--<![endif]-->
  19.       linkWrap = |<!--[if IE 7]><!-->
  20.       ATagBeforeWrap = 1
  21.     }
  22.  
  23.     ACT < .NO
  24.     ACT = 1
  25.     ACT.ATagParams = class=dropact
  26.     ACTIFSUB < .IFSUB
  27.     ACTIFSUB.ATagParams = class=dropact
  28.  
  29.     RO < .NO
  30.     RO = 1
  31.     ROIFSUB < .IFSUB
  32.   }
  33.  
  34.  
  35.   # Ebene 2
  36.   2 = TMENU
  37.   2 {
  38.     noBlur = 1
  39.     wrap = <!--[if lte IE 6]><table><tr><td>
  40.               <![endif]--><ul> | </ul>
  41.               <!--[if lte IE 6]></td></tr></table></a>
  42.               <![endif]-->
  43.     expAll = 1
  44.     NO.ATagTitle.field = subtitle//title
  45.     NO.wrapItemAndSub = <li> | </li>
  46.     IFSUB = 1
  47.     IFSUB {
  48.       wrapItemAndSub = <li> | </li>
  49.       allWrap = | <!--<![endif]-->
  50.       linkWrap = |<!--[if IE 7]><!-->
  51.       ATagBeforeWrap = 1
  52.       ATagParams = class=drop
  53.     }
  54.   }
  55.  
  56.   # Ebene 3
  57.   3 < .2
  58.  
  59.   # Ebene 4
  60.   4 < .2

Die CSS-Datei

  1. /* ================================================================ 
  2. This copyright notice must be untouched at all times.
  3.  
  4. The original version of this stylesheet and the associated (x)html
  5. is available at http://www.cssplay.co.uk/menus/flyout3.html
  6. Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
  7. This stylesheet and the assocaited (x)html may be modified in any 
  8. way to fit your requirements.
  9. =================================================================== */
  10. .menu {
  11.         position: relative;
  12. 	z-index:1000;
  13. 	font-family: Verdana,Arial,Helvetica,sans-serif;
  14. 	font-size: 8pt;
  15. 	float:right;	/*margin:0 25px 50px 0;  this page only */
  16.          top: 10px;
  17.          right: 10px;
  18. }
  19. /* remove all the bullets, borders and padding from the default list styling */
  20. .menu ul {
  21. 	padding:0;
  22. 	margin:0;
  23. 	list-style-type:none;
  24. 	width:142px;
  25. }
  26. /* hack for IE5.5 
  27. * html .menu ul {
  28. 	margin-left:-16px;
  29. 	ma\rgin-left:0;
  30. }*/
  31. /* position relative so that you can position the sub levels */
  32. .menu li {
  33. 	position:relative;
  34. 	background:rgb(96, 116, 145);
  35. 	height: 17px;
  36. }
  37. /* get rid of the table */
  38. .menu table {
  39. 	position:absolute;
  40. 	border-collapse:collapse;
  41. 	top:0;
  42. 	left:0;
  43. 	z-index:100;
  44. 	font-size:1em;
  45. }
  46. /* style the links */
  47. .menu a, .menu a:visited {
  48. 	display:block;
  49. 	text-decoration:none;
  50. 	height:17px;
  51. 	line-height:17px;
  52. 	width:142px;
  53. 	color:#fff;
  54. 	text-indent:5px;
  55. 	border:1px solid #fff;
  56. /*	border-width:0 1px 1px 0;*/
  57.         text-decoration: none !important;
  58.  
  59. }
  60. /* hack for IE5.5 */
  61. * html .menu a, * html .menu a:visited {
  62. 	background:rgb(96, 116, 145);
  63. 	width:142px;
  64. 	w\idth:141px;
  65. }
  66. /* style the link hover */
  67. * html .menu a:hover {
  68. 	color:rgb(96, 116, 145);
  69. 	background-color:rgb(194,204,214);
  70. }
  71. .menu :hover > a {
  72. 	color:rgb(96, 116, 145);
  73. 	background-color:rgb(194,204,214);
  74. }
  75. /* hide the sub levels and give them a positon absolute so that they take up no room */
  76. .menu ul ul {
  77. 	visibility:hidden;
  78. 	position:absolute;
  79. 	top:0;
  80. 	left:-142px;
  81. }
  82. /* make the second level visible when hover on first level list OR link */
  83. .menu ul li:hover ul, .menu ul a:hover ul {
  84. 	visibility:visible;
  85. }
  86. /* keep the third level hidden when you hover on first level list OR link */
  87. .menu ul :hover ul ul {
  88. 	visibility:hidden;
  89. }
  90. /* keep the fourth level hidden when you hover on second level list OR link */
  91. .menu ul :hover ul :hover ul ul {
  92. 	visibility:hidden;
  93. }
  94. /* make the third level visible when you hover over second level list OR link */
  95. .menu ul :hover ul :hover ul {
  96. 	visibility:visible;
  97. }
  98. /* make the fourth level visible when you hover over third level list OR link */
  99. .menu ul :hover ul :hover ul :hover ul {
  100. 	visibility:visible;
  101. }
  102.