Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:navigation

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung
Vorherige Überarbeitung
typo3:navigation [2014/02/01 15:27] – [Brotkrumen-Navigation] admintypo3: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 13: Zeile 15:
  
 ---- ----
-===== Verschachtelte Listen-Navigation ===== 
  
-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. +===== Sprachauswahl =====
- +
-{{ typo3:example-nav-list-lines.png }}+
  
 <code typoscript> <code typoscript>
-10 HMENU +lib.langMenu COA 
-10 +lib.langMenu 
-  TMENU +  wrap <ul>|</ul> 
-  +   
-    wrap = <ul class="sub1">|</ul+  10 = TEXT 
-    noBlur = 1+  10 { 
 +    value = Sprache: 
 +    lang.en = Language: 
 +    wrap = <li>|</li
 +  }
  
-    NO = 1 +  20 = HMENU 
-    NO { +  20 { 
-     ATagTitle.field title +    special = language 
-     wrapItemAndSub = <li class="nav-first">|</li> || <li class="nav-norm">|</li>+    special.value 0,
 +     
 +    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> 
 +      }
     }     }
-    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> 
   }   }
 +  
 } }
 </code> </code>
-<code css> 
-#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 */ +===== Klasse "active" bei Shortcuts =====
-.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) */ +Mit dem folgenden Snippet erhält ein Shortcut die Klasse "active"wenn die damit verknüpfte Seite geladen istPraktisch z.B., wenn die //Root Page// die tatsächliche Startseite ist und ein Menüpunkt "Home" als Shortcut darauf verweist.
-.sub3 li, .sub3 .nav-first, .sub3 .nav-first-cur, .sub3 .nav-first-act { +
-  width: 160px; +
-}+
  
-/* Anker nur erste Ebene */ +<code> 
-.nav-first a, .nav-norm a +NO = 1 
-  color: black; +NO 
-  font-weight: bold; +  ATagParams.override.cObject = COA 
-+  ATagParams.override.cObject 
-.nav-first-cur a, .nav-cur a, .nav-first-act a, .nav-act a +    if { 
-  background-color: #88BEFF; +      value = 4 
-  color: #0055AA; +      equals.field = doktype 
-  font-weight: bold; +      isTrue = 1 
-} +      isTrue.if 
-.nav-first-cur a, .nav-cur a +        value.data = TSFE:page|uid 
-  background-color#0055AA; +        equals.field = shortcut 
-  color: white; +      } 
-  font-weight: bold; +    
-+    10 = TEXT 
-#submenu a:hover, #submenu a:active { +    10.value = class="active" 
-  background-color: #0055AA; +  }
-  color: white;+
 } }
 +</code>
 +
 +----
 +
  
-/* 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;   
-} 
-</code> 
typo3/navigation.1391264865.txt.gz · Zuletzt geändert: 2015/12/03 19:29 (Externe Bearbeitung)