TYPO3-Testaccount
Testen Sie die aktuellste TYPO3-Version kostenlos und unverbindlich für einen Monat!

Jetzt testen!

Schulungen

jetzt buchen
Forum » TypoScript » Menüs

Dropdown Menu - submenu soll bei aktivem Zustand aufgeklappt bleiben


Autor Nachricht
Verfasst am: 06. 01. 2012 [11:28]
roemer.ag
Themenersteller
Dabei seit: 06.01.2012
Beiträge: 1
 Hallo Leute!
Ich bin Anfänger oder besser Tutorialzusammenbastler icon_smile.gif

In einem aktuellen Projekt habe ich ein horizontales Menu eingebaut, welches per css beim Überfahren die Unternavigation ausklappt...

Mein Problem (oder besser Wunsch):
Klickt man auf einen Sub-Navigationspunkt, soll bei dieser aktiven Seite das Untermenue
aufgeklappt bleiben... bekomme ich nicht hin icon_frown.gif

Hier der Link zum Projekt: http://typo3.p154291.mittwaldserver.info/kabarett.html

Hier mein aktuelles Menue-Script:
TYPOSCRIPT
tmp.navigation = HMENU
tmp.navigation {
	entryLevel = 0
	1 = TMENU
	1 {
		expAll = 1
		wrap = <ul> | </ul>
		NO = 1
		NO {
			wrapItemAndSub = <li> | </li>
			ATagTitle.field = nav_title // title // alias
		}
		ACT = 1
		ACT < .NO
		ACT.ATagParams = class=cur
	}
	2 < .1
}


Hier mein css:
CSS
#navigation ul {
	margin: 0;
	padding: 0;
	text-align:left;
}
#navigation ul li {
	list-style: none;
	float: left;  /* ohne width - nach CSS 2.1 erlaubt */
	position: relative;
	margin:0;
	padding:0;
}
#navigation ul li a {
	display: block;
	/* Breite den in li enthaltenen Elementen zuweisen */
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	font-weight: bold;
	color: #999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	float:left;
}
#navigation ul li a.cur {
	display: block;
	/* Breite den in li enthaltenen Elementen zuweisen */
	padding: 5px 10px 5px 10px;
	text-decoration: none;
	font-weight: bold;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	float:left;
	background-color:#990000;
}
#navigation ul li a:hover {
	color: #FFF;
	background-color:#990000;
}
#navigation ul li ul {
	margin: 0;
	position: absolute;
	padding:8px 0 0 10px;
	top:20px;
	display: none;  /* Unternavigation ausblenden */
}
#navigation ul li:hover {
color:#fff;
}
#navigation ul li:hover ul {
	display: block;  /* Unternavigation in modernen Browsern einblenden */
	margin:0;
	background-color:transparent;
}
 
#navigation ul li ul li {
	background-color:transparent;
}
#navigation ul li ul li a {
	background-color:transparent;
	display:inline-block;
	width:300px;
	margin:0;
	padding:3px 0px 3px 0px;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:normal;
	text-align:left;
}
#navigation ul li ul li a:hover {
	color:#F00;
	background-color:transparent;
}
#navigation ul li ul li a.cur {
	color:#F00;
	background-color:transparent;
	font-size:10px;
	font-weight:normal;
	margin:0;
	padding:0;
	display: block;  /* Unternavigation in modernen Browsern einblenden */
	margin:0;
}


Hat jemand einen Tipp?
Würde mich sehr freuen, Christoph
Profil
Verfasst am: 06. 01. 2012 [18:23]
Niklas Lazinbee
Dabei seit: 17.09.2005
Beiträge: 160
 Hallo Christoph,
ich habe gerade nicht die Zeit, das im Einzelnen zu durchdenken, aber du könntest im Zustant ACT eine Klasse reinschreiben, die das display:none aufhebt
CSS
#navigation ul li ul.aktiv {
	margin: 0;
	position: absolute;
	padding:8px 0 0 10px;
	top:20px;
	display: block;  /* Unternavigation ausblenden */
}


Gruß,
Niklas
Profil