Benutzer-Werkzeuge

Webseiten-Werkzeuge


typo3:navigation

Dies ist eine alte Version des Dokuments!


Navigation

Brotkrumen-Navigation

lib.breadcrumb = HMENU
lib.breadcrumb {
	special = rootline
	special.range = 0 | -1
	wrap = Sie sind hier: |
 
	1 = TMENU
	1.NO.allWrap = | > |*| | > |*| |
}

Sprachauswahl

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>
      }
    }
  }
 
}

Klasse "active" bei Shortcuts

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"
  }
}

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.

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;  
}
typo3/navigation.1463764394.txt.gz · Zuletzt geändert: 2016/05/20 19:13 von admin