Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.
Beide Seiten, vorherige ÜberarbeitungVorherige ÜberarbeitungNächste Überarbeitung | Vorherige Überarbeitung | ||
typo3:navigation [2014/02/01 15:27] – [Verschachtelte Listen-Navigation] admin | typo3:navigation [2017/05/08 22:30] (aktuell) – Entfernung veralteter Konfiguration admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
+ | ====== Navigation ====== | ||
+ | |||
===== Brotkrumen-Navigation ===== | ===== Brotkrumen-Navigation ===== | ||
<code typoscript> | <code typoscript> | ||
Zeile 12: | Zeile 14: | ||
</ | </ | ||
- | ===== Verschachtelte Listen-Navigation ===== | + | ---- |
- | Aufgebaut mit unsortierten Listen (''< | + | ===== Sprachauswahl ===== |
- | + | ||
- | {{ typo3: | + | |
<code typoscript> | <code typoscript> | ||
- | 10 = HMENU | + | lib.langMenu |
- | 10 { | + | lib.langMenu |
- | | + | |
- | | + | |
- | wrap = <ul class=" | + | 10 = TEXT |
- | | + | 10 { |
+ | value = Sprache: | ||
+ | lang.en = Language: | ||
+ | wrap = <li>|</li> | ||
+ | } | ||
- | NO = 1 | + | 20 = HMENU |
- | | + | 20 { |
- | | + | special = language |
- | wrapItemAndSub = < | + | special.value |
+ | |||
+ | | ||
+ | addQueryString.exclude | ||
+ | | ||
+ | |||
+ | 1 = TMENU | ||
+ | 1 { | ||
+ | NO = 1 | ||
+ | NO { | ||
+ | | ||
+ | stdWrap.cObject = TEXT | ||
+ | stdWrap.cObject { | ||
+ | value = Deutsch | ||
+ | } | ||
+ | } | ||
+ | ACT < .NO | ||
+ | ACT { | ||
+ | doNotLinkIt = 1 | ||
+ | wrapItemAndSub = <li class=" | ||
+ | } | ||
} | } | ||
- | CUR = 1 | ||
- | CUR { | ||
- | ATagTitle.field = title | ||
- | wrapItemAndSub = <li class=" | ||
- | } | ||
- | ACT = 1 | ||
- | ACT { | ||
- | ATagTitle.field = title | ||
- | wrapItemAndSub = <li class=" | ||
- | } | ||
- | } | ||
- | 2 < .1 | ||
- | 2 { | ||
- | wrap = < | ||
- | } | ||
- | 3 < .1 | ||
- | 3 { | ||
- | wrap = < | ||
} | } | ||
+ | | ||
} | } | ||
</ | </ | ||
- | <code css> | ||
- | #submenu { | ||
- | border-right: | ||
- | float: left; | ||
- | font-size: 14px; | ||
- | line-height: | ||
- | min-height: 1px; | ||
- | width: 180px; | ||
- | } | ||
- | #submenu ul { | ||
- | list-style-type: | ||
- | margin: 0; | ||
- | padding: 0; | ||
- | width: 180px; | ||
- | } | ||
- | #submenu a { | ||
- | display: block; | ||
- | padding: 8px 0 8px 5px; | ||
- | text-decoration: | ||
- | } | ||
- | /* Aufbau auf erster Ebene */ | + | ---- |
- | .nav-norm, .nav-cur, .nav-act { | + | |
- | border-top: 1px solid #0055AA; | + | |
- | margin: 0; | + | |
- | padding: 0; | + | |
- | } | + | |
- | /* Aufbau auf zweiter Ebene */ | + | ===== Klasse " |
- | .sub2 .nav-first, .sub2 .nav-first-cur, | + | |
- | border-top: 1px solid #0055AA; | + | |
- | margin: 0; | + | |
- | padding-left: | + | |
- | width: 170px; | + | |
- | } | + | |
- | .sub2 li { | + | |
- | margin-left: | + | |
- | width: 170px; | + | |
- | } | + | |
- | /* Aufbau auf dritter Ebene (neue Breite je neuer Ebene) */ | + | Mit dem folgenden Snippet erhält ein Shortcut die Klasse " |
- | .sub3 li, .sub3 .nav-first, | + | |
- | width: 160px; | + | |
- | } | + | |
- | /* Anker nur erste Ebene */ | + | < |
- | .nav-first a, .nav-norm a { | + | NO = 1 |
- | | + | NO { |
- | | + | |
- | } | + | |
- | .nav-first-cur a, .nav-cur a, .nav-first-act a, .nav-act a { | + | if { |
- | | + | value = 4 |
- | | + | |
- | | + | |
- | } | + | |
- | .nav-first-cur a, .nav-cur a { | + | |
- | | + | |
- | | + | } |
- | | + | } |
- | } | + | 10 = TEXT |
- | #submenu a:hover, #submenu a:active | + | 10.value = class=" |
- | | + | |
- | color: white; | + | |
} | } | ||
+ | </ | ||
+ | |||
+ | ---- | ||
+ | |||
- | /* Anker ab zweiter Ebene (vererbt sich auf alle weiteren Ebenen) */ | ||
- | .sub2 a { | ||
- | font-weight: | ||
- | } | ||
- | .sub2 .nav-first-cur a, .sub2 .nav-cur a, .sub2 .nav-first-act a, .sub2 .nav-act a { | ||
- | background-color: | ||
- | color: #0055AA; | ||
- | } | ||
- | .sub2 .nav-first-cur a, .sub2 .nav-cur a { | ||
- | background-color: | ||
- | color: white; | ||
- | font-weight: | ||
- | } | ||
- | </ |