Dies ist eine alte Version des Dokuments!
lib.breadcrumb = HMENU lib.breadcrumb { special = rootline special.range = 0 | -1 wrap = Sie sind hier: | 1 = TMENU 1.NO.allWrap = | > |*| | > |*| | }
lib.langMenu = COA lib.langMenu { wrap = <ul>|</ul> 10 = TEXT 10 { value = Sprache: lang.en = Language: wrap = <li>|</li> } 20 = HMENU 20 { special = language special.value = 0,1 addQueryString = 1 addQueryString.exclude = id addQueryString.method = GET 1 = TMENU 1 { NO = 1 NO { wrapItemAndSub = <li>|</li> stdWrap.cObject = TEXT stdWrap.cObject { value = Deutsch || English } } ACT < .NO ACT { doNotLinkIt = 1 wrapItemAndSub = <li class="active">|</li> } } } }
Mit dem folgenden Snippet erhält ein Shortcut die Klasse „active“, wenn die damit verknüpfte Seite geladen ist. Praktisch z.B., wenn die Root Page die tatsächliche Startseite ist und ein Menüpunkt „Home“ als Shortcut darauf verweist.
NO = 1 NO { ATagParams.override.cObject = COA ATagParams.override.cObject { if { value = 4 equals.field = doktype isTrue = 1 isTrue.if { value.data = TSFE:page|uid equals.field = shortcut } } 10 = TEXT 10.value = class="active" } }
Aufgebaut mit unsortierten Listen (<ul>
); die Anker (<a>
) bilden mit display:block
die Buttons. Die Menüpunkte werden durch Linien getrennt, welche auch bei Verschachtelung mehrerer Ebenen nur einmal vorhanden sind.
10 = HMENU 10 { 1 = TMENU 1 { wrap = <ul class="sub1">|</ul> noBlur = 1 NO = 1 NO { ATagTitle.field = title wrapItemAndSub = <li class="nav-first">|</li> || <li class="nav-norm">|</li> } CUR = 1 CUR { ATagTitle.field = title wrapItemAndSub = <li class="nav-first-cur">|</li> || <li class="nav-cur">|</li> } ACT = 1 ACT { ATagTitle.field = title wrapItemAndSub = <li class="nav-first-act">|</li> || <li class="nav-act">|</li> } } 2 < .1 2 { wrap = <li><ul class="sub2">|</ul></li> } 3 < .1 3 { wrap = <li><ul class="sub3">|</ul></li> } }
#submenu { border-right: 1px solid #0055AA; float: left; font-size: 14px; line-height: 120%; min-height: 1px; width: 180px; } #submenu ul { list-style-type: none; margin: 0; padding: 0; width: 180px; } #submenu a { display: block; padding: 8px 0 8px 5px; text-decoration: none; } /* Aufbau auf erster Ebene */ .nav-norm, .nav-cur, .nav-act { border-top: 1px solid #0055AA; margin: 0; padding: 0; } /* Aufbau auf zweiter Ebene */ .sub2 .nav-first, .sub2 .nav-first-cur, .sub2 .nav-first-act { border-top: 1px solid #0055AA; margin: 0; padding-left: 10px; width: 170px; } .sub2 li { margin-left: 10px; width: 170px; } /* Aufbau auf dritter Ebene (neue Breite je neuer Ebene) */ .sub3 li, .sub3 .nav-first, .sub3 .nav-first-cur, .sub3 .nav-first-act { width: 160px; } /* Anker nur erste Ebene */ .nav-first a, .nav-norm a { color: black; font-weight: bold; } .nav-first-cur a, .nav-cur a, .nav-first-act a, .nav-act a { background-color: #88BEFF; color: #0055AA; font-weight: bold; } .nav-first-cur a, .nav-cur a { background-color: #0055AA; color: white; font-weight: bold; } #submenu a:hover, #submenu a:active { background-color: #0055AA; color: white; } /* Anker ab zweiter Ebene (vererbt sich auf alle weiteren Ebenen) */ .sub2 a { font-weight: normal; } .sub2 .nav-first-cur a, .sub2 .nav-cur a, .sub2 .nav-first-act a, .sub2 .nav-act a { background-color: #88BEFF; color: #0055AA; } .sub2 .nav-first-cur a, .sub2 .nav-cur a { background-color: #0055AA; color: white; font-weight: bold; }