Web Development
Oliver Thiele

Warum sollte man ein Punktelistenmenü verwenden?

Ein Menü als Punkteliste, also als ein textbasiertes Menü, aufzubauen, hat verschiedene Vorteile:

  1. Die Übertragungszeit der Seite ist schneller als bei einem GMENU
  2. Schriften wirken schärfer als die, die der GIFBUILDER erzeugt, vor allem, wenn kleine Schriftgrößen verwendet werden.
  3. Wenn der Text zu lang werden sollte, wird automatisch eine neue Zeile angefangen. Der Text steht dabei in jeder Zeile immer bündig untereinander.
  4. Die so erzeugten Menü-Einträge sind "barrierefrei" bzw. "barrierearm", da ein Screenreader diese Art von Menü viel besser wiedergeben kann.
  5. Die Suchmaschinen können die Links hervorragend analysieren. Durch die zusätzliche Verwendung von Title-Tags beim A-Tag kann man die Keyworddichte positiv beeinflussen.

Das Punkteliste-Menü werden wir mit dem Menü-Objekt TMENU aufbauen.

TypoScript Setup / lib.navigation.t3s

TypoScript
  1. lib.menu = HMENU
  2. lib.menu {
  3. special = directory
  4. special.value = 1
  5. wrap = <div id="mainmenu">|</div>
  6. 1 = TMENU
  7. 1 {
  8. noBlur = 1
  9. wrap = <ul>|</ul>
  10. NO = 1
  11. NO {
  12. linkWrap = |<span class="hidden">.</span>
  13. wrapItemAndSub = <li>|</li>
  14. ATagTitle.field = abstract // description // title
  15. }
  16.  
  17. CUR < .NO
  18. CUR.linkWrap = <div class="cur">|<span class="hidden">.</span></div>
  19. CUR.doNotLinkIt = 1
  20.  
  21. ACT < .NO
  22. ACT.ATagParams = class="act"
  23. }
  24. 2 < .1
  25. 3 < .1
  26. }

In der Zeile 1 wird lib.menu das cObjekt HMENU zugewiesen.

In diesem Beispiel wird der Einstiegspunkt in Zeile 4 für das Menü auf die Seite mit der ID 1 gelegt (meist ist dies ja die Root-Seite).

In Zeile 5 wird das Menü komplett mit einem Div-Container verpackt, damit man im CSS alles genau definieren kann.

In den Zeile 6-23 wird dann die erste Menüebene definiert.

Das noBlur = 1 in Zeile 8 entfernt die JavaScript-Funktion, die den Focus löscht, wenn der Link aktiviert wird. Dies wird für barrierearme Seiten benötigt, da man sonst nicht bei allen Browsern durch die Links tabben kann.

In Zeile 9 wird die komplette 1. Menüebene mit den <ul>-Tags umschlossen. Damit nicht für jeden weiteren verwendeten Zustand eine Aktivierung mit z.B. CUR = 1 , ACT = 1 erfolgen muss, setzt man NO = 1 (Zeile 10). Dies wird beim späteren Kopieren mit übernommen.

Das "<span class="hidden">.</span>" sorgt in Zeile 12 dafür, dass ein Screenreader nach dem Vorlesen des Menüeintrags eine Pause macht und die Stimme absenkt. Der Punkt muss aber über CSS unsichtbar gemacht werden (siehe CSS-Beispiel weiter unten).

Anstatt des schon verwendeten linkWraps muss nun in Zeile 13 wrapItemAndSub für die li-Tags verwendet werden. Somit wird jetzt ein Link ohne Untermenü mit <li>...</li> umschlossen; ein Link mit Untermenü allerdings nur mit <li>...Untermenü...
Dadurch, das die nächste Menüebene wieder mit einem <ul>-Tag anfängt, wird die Punkteliste sauber generiert.
Nachdem das Untermenü komplett abgeschlossen ist, wird auch das schließende </ul> ausgegeben.

In Zeile 14 wird dem A-Tag das <title>-Tag aus einem Datenbankfeld mitgegeben. Wenn in den Datenbankfeldern der Seite sowohl die Inhaltsangabe (abstract) als auch die Beschreibung (description) nicht eingetragen ist, wird zumindest der Seitentitel eingetragen.

Zeile 17 kopiert die Definition noch vom Normal-Zustand in den Zustand CUR, der aktiv ist, wenn die Seite geöffnent ist.

Zeile 18 hat durch das folgende doNotLinkIt kein A-Tag, somit kann hier nicht wie z.B. in Zeile 22 dem A-Tag eine Klasse hinzugefügt werden, um diesen Menüzustand separat mit CSS anzusprechen. Zeile 19 entfernt nun noch den Link auf diese Seite, da er hier nicht notwendig und bei barrierefreien Seiten auch nicht gewünscht ist.

Zeile 22 fügt dem A-Tag noch eine CSS-Klasse hinzu, damit man diesen Zustand auch im CSS einzeln ansprechen kann. Diese Definition wird dann nur noch in Zeile 24 und 25 für die 2. und 3. Menüebene kopiert.

Nun kann man diese Menü mit CSS grafisch noch verfeinern. Wichtig für den versteckten Punkt ist dabei, das weder "visibility: none;" noch "display: hidden;" verwendet werden kann, da dann der Punkt auch von einem Screenreader nicht ausgewertet würde.

Beispiel CSS

myStyles.css

CSS
span.hidden {
	position:absolute;
	left:-1000px;
	top:-1000px;
	width:0;
	height:0;
	overflow:hidden;
	display:inline;
}
div#mainmenu {
	background-color: #d5d5d5;
	width: 180px;
	border: 1px solid black;
	border-bottom: 0px;
}
div#mainmenu * {
	margin: 0px;
	padding: 0px;
	color: black;
}
div#mainmenu .cur {
	color: green;
}
 
div#mainmenu .act {
	color: blue;
}
div#mainmenu ul {
	list-style-type: none;
}
div#mainmenu ul li {
	border-bottom: 1px solid black;
}
 
div#mainmenu ul li a,
div#mainmenu ul li div {
	padding: 3px 3px 3px 10px;
	text-decoration: none;
	font-family: verdana,arial,helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	display: block;
}
div#mainmenu ul li a:hover {
	background-color: #ffffff;
}
div#mainmenu ul ul {
	background-color: #e5e5e5;
}
div#mainmenu ul ul li {
	border-bottom: none;
}
div#mainmenu ul ul li a,
div#mainmenu ul ul li div {
	font-size: 10px;
	padding-left: 25px;
}
div#mainmenu ul ul li a:hover{
	background-color: #ddddff;
}

Das CSS-Beispiel generiert ein Menü, dass so wie in den Bildern hier aussieht.

Bei sehr langen Menüeinträgen wird der Text bündig untereinander angezeigt. Möchte man noch eine Grafik vor dem Eintrag haben, sollte man diese mit CSS als Hintergrund-Grafik zum li-Tag hinzufügen.

© Copyright 2003-2017 Web Development Oliver Thiele. All rights reserved. - Diese Seite wurde am 04.06.2013 um 13:34 erstellt.
Letzte Änderung: 27.07.2015 16:46:37

oliver-thiele.de Trustcheck Seal