Anspruchsvolles Webdesign mit Typo3: moderne Drop-down-Menüs

Anspruchvolles Webdesign mit Typo3: komplexe Drop-down-Menüs

Dass unter Typo3 die Gestaltungsmöglichkeiten von Menüs dank TypoScript enorm flexibel sind, ist gemeinhin bekannt. Wir wollten es genau wissen und haben ein komplexes Drop-down-Menü für Typo3 erstellt.

Dabei konnten wir etwa 90% der Drop-down-Menü-Funktionalität allein mit TypoScript umsetzen, ohne auch nur eine Zeile PHP-Code schreiben zu müssen. Für die restlichen 10% genügten dann rund zehn Zeilen PHP-Code, den wir mittels der TypoScript-Funktion “itemArrayProcFunc” in den Menü-Rendering-Prozess einschleusten – ein Hoch auf Typo3

Des Weiteren haben wir das Menü so implementiert, dass die Darstellung/Funktionalität unter modernen Browsern allein auf CSS-Basis gelingt und gänzlich ohne JavaScript auskommt. Lediglich für den Internet Explorer 6 mussten wir auf JavaScript zurückgreifen.

[UPDATE]

Inzwischen haben wir den Code optimiert und stellen diesen der Typo3-Community zur Verfügung:

TypoScript:

###################################################
## lib.nav (Button Navigation in Header)
###################################################
lib.nav = COA
lib.nav {
	10 = TEXT
	10.value = 
	10.stdWrap.prefixComment = 2|Output of lib.nav.10
	20 = HMENU
	20 {
		stdWrap.prefixComment = 2|Output of lib.nav.20
		wrap =
|

entryLevel = {$tabNavEntryLevel}
		excludeUidList = {$tabNavExcludeList}
		1 = TMENU
		1 {
			expAll = 1
			noBlur = 1
			wrap =
|

NO = 1
			NO.ATagTitle.field = abstract // description // subtitle
			NO.wrapItemAndSub =
|

NO.linkWrap = |
			NO.ATagBeforeWrap = 1
			NO.stdWrap.htmlSpecialChars = 1
			ACT = 1
			ACT < .NO
			ACT.wrapItemAndSub =
|

ACTIFSUB = 1
			ACTIFSUB < .NO
			ACTIFSUB.wrapItemAndSub =
|

IFSUB = 1
			IFSUB < .NO
			IFSUB.wrapItemAndSub =
|

CURIFSUB = 1
			CURIFSUB < .NO
			CURIFSUB.wrapItemAndSub =
|

}

		2 = TMENU
		2 {
			itemArrayProcFunc = user_menuManipulations->user_generateSubmenu
			noBlur = 1
			stdWrap.wrap =
 |

NO = 1
			NO.doNotLinkIt = 1
		}
	}
}

Der PHP-Code des eingebundenen PHP-Skripts ‘user_menuManipulations’:

<?php
require_once(PATH_tslib.'class.tslib_pibase.php');

class user_menuManipulations extends tslib_pibase {
function user_generateSubmenu($menuArr, $conf) {
If (count($menuArr) > 0) {
for ($i=0;$i<count($menuArr);$i++) {

//nav_title gesetzt?
if ($menuArr[$i]['nav_title']) {
$menuArr[$i]['title'] = $menuArr[$i]['nav_title'];
unset($menuArr[$i]['nav_title']);
}

if (($i === 0) && count($menuArr) === 1) //erstes Element und einziges Element
{
$menuArr[$i]['title'] = '<ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif ($i === 0) //erstes Element
{
$menuArr[$i]['title'] = '<ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
elseif ($i === (count($menuArr)-1) && true == ($i%4)) //letztes Element, wenn nicht Anfang eines neuen Blocks
{
$menuArr[$i]['title'] = '<li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif (false == ($i%4) && $i === (count($menuArr)-1)) //letztes Element, wenn Anfang eines neuen Blocks
{
$menuArr[$i]['title'] = '</ul><ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li></ul>';
}
elseif (false == ($i%4)) //Start neuer Block
{
$menuArr[$i]['title'] = '</ul><ul><li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
else //normales Element
{
$menuArr[$i]['title'] = '<li><a target="_self" href="'.$this->pi_getPageLink($menuArr[$i]['uid']).'"><span>'.$menuArr[$i]['title'].'</span></a></li>';
}
}
}
return $menuArr;
}
}
?>

[/UPDATE]