[hpatrick]

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!:sad:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23:

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

Sorry für die komische Darstellung des HTML Codes, ich weiß nicht woran das hier im vB liegt .... *confused*

Vielen Dank für eure Hilfe!!

Patrick

[Armin]

Handelt es sich um das ULTIMATE CSS only drop-down menu? Dann schau hier: The ULTIMATE CSS only drop-down menu

Armin

[hpatrick]

Nein. Es handelt sich hierbei um folgendes Menüscript:

Stu Nicholls | CSSplay | Validating drop down cross-browser menu

Wobei es vom gleichen Entwickler ist...

Lässt sich dein Menü auch mit 3 Ebenen realisieren?

[Armin]

moin,

das TS müsste das gleiche sein, Unterschiede bestehen eigentlich nur im CSS-File (Glaube ich zumindest).

Lässt sich dein Menü auch mit 3 Ebenen realisieren?

Ja, Info: Stu Nicholls | CSSplay | A css only dropdown menu

Armin

[hpatrick]

//Edit:

Sorry, es geht doch!

VIELEN DANK!

[mortoX]

Vielleicht hilft dir das hier auch weiter:
Typo3 Dropdownmenü