Komplexes Ausklapp-Menü mit CSS (wie in Typo-Script Umsetzen)

Hallo,

vorweg: Ich bin noch relativ neu in Typo3, hab zwar bereits ein Projekt mit T3 laufen, aber bei diesem Problem weiß ich einfach nicht weiter.

Ich hab mir ein horizontales Ausklappmenü erstellt (bzw. hab auf ein fertiges ausm Internet zurückgegriffen). CSS wählte ich wegen der Barrierefreiheit und so.

Der funktionierende HTML Code dafür lautet:

<div id="menu">
<ul>
	<li>

		<a href="index.html">Menüpunkt 1<!--[if IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</li>			
		</ul>
		<!--[if IE 7]><!--></a><!--<![endif]-->
	</li>

	
	<li>

		<a href="index.html">Menüpunkt 2<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</a></li>			
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>

	
	<li>
		<a href="index.html">Menüpunkt 3<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Unterpunkt 1</a></li>
			<li><a href="index.html">Unterpunkt 2</a></li>	
			<li><a href="index.html">Unterpunkt 3<!--[if IE 7]><!--></a><!--<![endif]-->

			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="right_side">
					<li><a href="index.html">Unterpunkt 3.1</a></li>
					<li><a href="index.html">Unterpunkt 3.2</a></li>	
					<li><a href="index.html">Unterpunkt 3.3</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>

Der CSS Code dazu:

#menu {		
		background-color:#FF9900;
		height:20px;
		width:100%;
		position:relative; 
		margin:0; 
		font-size:11px; 
		margin:20px 0 60px 0; 		
		z-index:100;		
}

#menu a:link {
		color:#000000;
		text-decoration:none;
}

#menu a:visited {
		color:#000000;
		text-decoration:none;
}

#menu a:active {
		color:#000000;
		text-decoration:none;
}

#menu a:hover {
		color:#000000;
		text-decoration:none;
}

#menu ul {
		padding:0;
		margin:0; 
		list-style-type: none;	
		z-index:100;	
}

#menu ul li {
		float:left; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee; 
		width:120px;
		list-style-type:none;
		display:inline;
		margin:none;
		z-index:100;
}

#menu ul li a, #menu ul li a:visited {
		display:block; 
		float:left; 
		width:120px; 
		text-decoration:none; 
		padding:0 0 0 5px; 
		line-height:20px; 
		background-color:#FF9900;
		z-index:100;
}

#menu table {
		border-collapse:collapse; 
		margin:0; 
		padding:0; 
		font-size:1em;
		z-index:100;
}

#menu ul li ul {
		visibility:hidden; 
		position:absolute; 
		top:20px; 
		left:0; 
		z-index:90;
}


#menu ul li:hover a, #menu ul li a:hover {
		color:#000000; 
		background-color:#F7AE16;
}

#menu ul li:hover ul, #menu ul li a:hover ul {
		visibility:visible; 
		width:100%;
		background-color:#F7AE16; 
		color:#fff;
		z-index:90;
}

#menu ul li:hover ul.right_side li, #menu ul li a:hover ul.right_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
		z-index:100;
}

#menu ul li:hover ul.left_side li, #menu ul li a:hover ul.left_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul li a.sub, #menu ul li a:hover ul li a.sub {
		background-color:#bd8d5e; 
		color:#fff;
}

#menu ul li:hover ul li ul, #menu ul li a:hover ul li a ul {
		visibility:hidden; 
		position:absolute; 
		left:0; 
		top:20px; 
		z-index:100;
}

#menu ul li:hover ul li a, #menu ul li a:hover ul li a {
		display:block; 
		background-color:#F7AE16; 
		color:#000000;
		z-index:100;
}

#menu ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover {
		background-color:#dfc184; 
		color:#000;
}

#menu ul li:hover ul li:hover ul, #menu ul li a:hover ul li a:hover ul {
		visibility:visible; 
		color:#000; 
		background-color:#dfc184;
		z-index:90;
		margin:0px;
}

#menu ul li:hover ul.right li {
		float:right;
}

#menu ul li:hover ul li:hover ul li a, #menu ul li a:hover ul li a:hover ul li a {
		background-color:#dfc184;
		color:#000;
}

#menu ul li:hover ul li:hover ul li a:hover, #menu ul li a:hover ul li a:hover ul li a:hover {
		background-color:#bd8d5e; 
		color:#fff;
}

So natürlich hab ich mich mit meinen bescheidenen TS Kenntnissen schonmal rangesetzt, aber das Ergebnis funktioniert komplett nicht. Gegoogelt hab ich auch schon und ich weiß einfach nicht mehr weiter. Besonders mit den ungewöhnlichen wraps stell ich mich noch an...

Hier mal mein TS Code (auch wenn er falsch ist!):

tmp.NAVIGATION = HMENU
tmp.NAVIGATION {
	1 = TMENU
	1 {
		wrap = <ul> | </ul>
		NO = 1
		NO.wrapItemAndSub = <li> | </li>
		
		ACT < .NO
		ACT.ATagParams= class = "navactive1"
                ACT.doNotLinkIt = 0
	}
	
	2 = TMENU
	2 {
		wrap = <!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>|</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
		NO = 1
		NO.wrapItemAndSub = <li> | </li>
		
		ACT < .NO
	}
}

Vielen Dank für eure Hilfe!!

Patrick

Also, dieses Menü gibts hier im Forum schonmal. Heißt das nicht Ultimate Dropdown oder so? Such mal hier im Forum danach, dann findest du den TS Code dazu. Allerdings ist die Frage ob das die beste Variante ist ein Dropdownmenü zu erstellen, weil es doch recht viele Hacks enthält.

Grüße

Christian

welches Menü würdest du mir denn empfehlen?

Weil das Ultimate-Dropdown Menü löäuft zwar perfekt mit Firefox und Opera, ... jedoch öffnen sich keine Unterebenen im Internet Explorer. Er zeigt nur die oberste Ebene an!

Kennst du ein alternatives Menü, am besten ohne Javascript!

Danke bereits für deine Hilfe!

hpatrick schrieb

Kennst du ein alternatives Menü, am besten ohne Javascript!

IE braucht ein js

georg

alles klar....

Welches Menü kannst du mir empfehlen, am besten gleich mit TypoScript, da ich mich derzeit noch in die Funktionen des TMENU einarbeite und noch nicht so glasklare Sicht hab....

zB http://www.just2b.com/mein-typo3/css-ts-menues.html wobei ich gerade leichte Probleme mit dem IE7 habe ..:/

im netz gibts allerdings genügend css-listenmenenüs und das ts dafür ist zu 90% dann immer das selbe

georg

8-) Psst, nicht weitersagen aber unter dem Link hier findest du extrem (man verzeihe mir den Ausdruck) "geile" Menüs, mit CSS und TS.

http://www.just2b.com/mein-typo3/css-ts-menues.html

Aber bitte nicht weitersagen!! 😃 😃

[edit]
Wääääh zu langsam #angry# #angry#
[/edit]

vielen Dank! Nun funzt das auch im IE... Vielen Dank!