[TYPO3] Eine Webseite benötigt eine Navigation, die bestimmte Kriterien erfüllt

21.08.2012 09:59 Uhr

Kriterien

  • 3 Ebenen sollen dargestellt werden
  • Untermenüs werden nur angezeigt wenn die übergeordnete Seite aktiv ist
  • Die einzelnen Links sollen jeweils einen umgebenden Tag erhalten, welcher die Links der nächsten Ebenen nicht mit einschließt.
  • Die umgebenden Tags sollen folgende Klasse/n erhalten, XY ist hierbei die Ebene: navLevelXYItem, navLevelXYItemActive
  • Zusätzlich sollen die umgebenden Tags derselben Ebene jeweils eine der folgenden Klassen erhalten: navLevelXYItemFirst, navLevelXYItemMiddle, navLevelXYItemLast
  • Die Links sollen einen "title"-Tag erhalten

 

Aufgabe
Wie könnte ein TypoScript für eine solche Navigation aussehen?
Bitte erklären Sie warum Sie die HTML-Struktur so gewählt haben.

 

Beispiel

<tag class="navLevel1Item navLevel1ItemFirst">
   <a href="..." title="Link Level 1">Link Level 1</a>
</tag>

 

1 Antwort

#1

21.08.2012 15:02 Uhr

Ich hab, um valides HTML zu erhalten, als Link Wrap ein Element vom Typ "div" gewählt. 

Die gewrappten Links sind noch mal in eine ul => li Liste verpackt, da sich für barrierearme Navigationen eine unsortierte Liste von Links am besten eignet. 

Durch den Wrap mit den divs, hab ich via CSS genügend Elemente um die Navigation ansprechend zu stylen.

### Level 1
lib.navi= HMENU
lib.navi.1 = TMENU
# Just to fit my development environment
lib.navi.entryLevel = 1
lib.navi.1 {
	wrap = <ul>|</ul>
	noBlur = 1

	NO{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel1ItemFirst navLevel1Item">|</div>|*|<div class="navLevel1ItemMiddle navLevel1Item">|</div>|*|<div class="navLevel1ItemLast navLevel1Item">|</div>
	}

	ACT = 1
	ACT{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel1ItemFirst navLevel1ItemActive">|</div>|*|<div class="navLevel1ItemMiddle navLevel1ItemActive">|</div>|*|<div class="navLevel1ItemLast navLevel1ItemActive">|</div>
	}
}


### Level 2
lib.navi.2 = TMENU
lib.navi.2 {
	wrap = <ul>|</ul>
	noBlur = 1

	NO{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel2ItemFirst navLevel2Item">|</div>|*|<div class="navLevel2ItemMiddle navLevel2Item">|</div>|*|<div class="navLevel2ItemLast navLevel2Item">|</div>
	}

	ACT = 1
	ACT{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel2ItemFirst navLevel2ItemActive">|</div>|*|<div class="navLevel2ItemMiddle navLevel2ItemActive">|</div>|*|<div class="navLevel2ItemLast navLevel2ItemActive">|</div>
	}
}

### Level 3
lib.navi.3 = TMENU
lib.navi.3 {
	wrap = <ul>|</ul>
	noBlur = 1

	NO{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel3ItemFirst navLevel3Item">|</div>|*|<div class="navLevel3ItemMiddle navLevel3Item">|</div>|*|<div class="navLevel3ItemLast navLevel3Item">|</div>
	}

	ACT = 1
	ACT{
		ATagTitle.field = title
		wrapItemAndSub =  <li>|</li>
		linkWrap= <div class="navLevel3ItemFirst navLevel3ItemActive">|</div>|*|<div class="navLevel3ItemMiddle navLevel3ItemActive">|</div>|*|<div class="navLevel3ItemLast navLevel3ItemActive">|</div>
	}
}

Ähnliche Fragen



Datenschutzerklärung · Impressum