Listenpunkte als Grafik bei Submenü und Vererbung

**closeup** · 08.12.2009, 10:12

Hallo zusammen,

im Submenü möchte ich ab level_2 Grafiken als Listenpunkte (Background-Image) anzeigen. Soweit passt auch alles, außer, dass ich in level_3 und level_4 bei den .active Menüpunkten nun 2 Grafiken davon habe. Es soll aber nur eine Grafik sein.

Wie müsste ich das korrekt im Stylesheet angeben?

Vielen Dank schonmal, ich hoffe, ihr könnt mir weiterhelfen.

Anbei ein Screenshot von Firebug.

Das CSS für das Menü sieht so aus:

Code:

#submenu .level_1{width:180px;margin:0;padding:0;list-style-type:none;}
#submenu .level_1 li{margin:0;padding:5px 0 5px 40px;border-bottom:1px solid #FCD2BA;font-size:10pt;list-style-type:none;}
#submenu .level_1 li .active{color:#F46F21;}
#submenu .level_1 a,#submenu .level_1 a:hover{font-weight:normal;text-decoration:none;color:#313131;}
#submenu .level_2{margin-left:0;padding-left:0;}
#submenu .level_2 li{margin:0;padding:5px 0 0 0;border:0;font-size:9pt;list-style-type:none;}
#submenu .level_2 li .active{display:block;padding-left:10px;color:#F46F21;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}
#submenu .level_2 a,#submenu .level_2 a:hover{display:block;padding-left:10px;font-weight:normal;text-decoration:none;color:#313131;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}
#submenu .level_3{margin-left:0;padding-left:10px;}
#submenu .level_3 li .active{display:block;padding-left:10px;color:#F46F21;}
#submenu .level_3 a,#submenu .level_3 a:hover{display:block;padding-left:10px;font-weight:normal;text-decoration:none;color:#313131;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}
#submenu .level_4{margin-left:0;padding-left:10px;}
#submenu .level_4 li .active{display:block;padding-left:10px;color:#F46F21;}
#submenu .level_4 a,#submenu .level_4 a:hover{display:block;padding-left:10px;font-weight:normal;text-decoration:none;color:#313131;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}

**brandtmarke** · 08.12.2009, 12:11

statt

Code:

#submenu .level_2 li .active{display:block;padding-left:10px;color:#F46F21;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}

Code:

#submenu .level_2 li span.active{display:block;padding-left:10px;color:#F46F21;background: url(tl_files/takkt_template/images/pfeil_nav.gif) no-repeat left 4px;}

sonst bekommt das li-Element auch einen Pfeil

**closeup** · 08.12.2009, 13:21

Hi,

super, besten Dank! Jetzt geht es. Musste nur bei level_3 das "span" davor setzen.
Manchmal sieht man echt vor lauter Bäumen den Wald nicht.

**closeup** · 09.12.2009, 14:30

Hi zusammen,

in der Hauptnavigation oben habe ich nun ein ähnliches Problem. Und zwar werden die Links in der ersten Ebene (.level_1) folgendermaßen formatiert:

Code:

#mainmenu .level_1 a {
display:block;
padding-left:20px;
text-decoration:none;
color:#313131;}

Wenn ich nun das jeweils aktive Element (.active) genauso formatieren möchte, wie muss ich da vorgehen? Das .acitve Element ist ja kein Link.

#mainmenu .level_1 span.active habe ich versucht, hat aber nichts bewirkt.

**brandtmarke** · 09.12.2009, 14:40

Code:

#mainmenu .level_1 a,
#mainmenu .level_1 span {
display:block;
padding-left:20px;
text-decoration:none;
color:#313131;}

Sollte eigentlich gehen, es sei denn es wird an anderer Stelle wieder überschrieben ...

**closeup** · 09.12.2009, 14:56

Super, danke für die schnelle Hilfe. Mit

Code:

#mainmenu .level_1 span

hat es funktioniert.

So langsam komme ich dem finalen Menü immer näher.

Was noch fehlt ist, dass bei level_1 jeweils eine kleine Grafik vor dem Menüpunkt stehen sollte (dementsprechend bei Hover eine andere Grafik), siehe hier:

Code:

#mainmenu .level_1 .holding a {background: url(images/1.gif) no-repeat 5px;}
#mainmenu .level_1 .holding a:hover{background: url(images/1_on.gif) no-repeat 5px;}

So wie der Code jetzt ist, wird die Grafik auch bei Untermenüpunkten angezeigt (level_2), was aber nicht sein soll.

Wie bekomme ich die dort weg?

Das .holding kommt übrigens daher, dass ich bei jedem Menüpunkt eine andere Grafik anzeigen will, deshalb habe ich jeweils eine eigene Klasse vergeben.

**brandtmarke** · 09.12.2009, 15:00

Code:

#mainmenu .level_2  * {background: none;}

**brandtmarke** · 09.12.2009, 15:02

btw.:
http://www.css4you.de ist eine imho sehr gute CSS Refrenz Seite, die ein gutes Kapitel über CSS Selektoren enthält

**closeup** · 09.12.2009, 15:16

Zitat von brandtmarke

Code:

#mainmenu .level_2  * {background: none;}

Hm, so verschwindet zwar die Hintergrundfarbe (die ja bleiben soll), die Grafik wird aber weiterhin angezeigt. Irgendwas stimmt noch nicht.

Danke für den Tipp mit www.css4you.de - die Seite kenn ich, schaue da auch öfter vorbei um was nachzuschauen.

**closeup** · 09.12.2009, 15:19

Hier mal das komplette Stylesheet für das mainmenü:

Code:

#mainmenu{width:792px;position:absolute;overflow:visible;background-color:#c7e1f2;z-index:999;}
#mainmenu .level_1 .holding a{background: url(images/1.gif) no-repeat 5px;}
#mainmenu .level_1 .holding a:hover{background: url(images/1_on.gif) no-repeat 5px;}
#mainmenu .level_1 a,#mainmenu .level_1 span{display:block;padding-left:20px;font-weight:bold;text-decoration:none;color:#313131;}
#mainmenu p{margin:0;padding:0;}
#mainmenu ul{margin:0;padding:0;list-style-type:none;}
#mainmenu .level_1 li{width:150px;}
#mainmenu .level_2 li{width:180px;line-height:19px;}
#mainmenu .level_2 li a{font-weight:normal;color:#313131 !important;}
#mainmenu li{position:relative;float:left;background-color:#c7e1f2;border-bottom:1px solid #ffffff;line-height:26px;}
#mainmenu li ul{left:0px;right:0px;top:27px;position:absolute;display:none;}
#mainmenu li:hover ul,#mainmenu li.sfhover ul{display:block;}
#mainmenu li:hover,#mainmenu li.sfhover{background-color:#F46F21;}
#mainmenu .level_1 li:hover a,#mainmenu .level_1 li.sfhover a{color:#fff;}
#mainmenu .level_2 li:hover a,#mainmenu .level_2 li.sfhover a{font-weight:normal;color:#fff !important;}

**brandtmarke** · 09.12.2009, 15:22

sorry, in dem Fall

Code:

#mainmenu .level_2  *,
#mainmenu .level_2  *:hover {background-image: none;}

Ein kleiner TIP: benutze ein Sprite f.d. Hintergrundgrafik, d.h. leg beide (1.gif und 1_on.gif) in eine Datei und verändere dann bei :hover nur die Position ...

**closeup** · 09.12.2009, 15:35

Hi,

mit background-image:none; habe ich es auch schon versucht, die Grafik wird aber weiterhin angezeigt. Es scheint, als ob die Grafik trotzdem irgendwie vererbt wird.

Den Stern kann man schon als Selektor verwenden oder war das Sternchen als Platzhalter für die jeweilige Klasse (z.B. .holding) gedacht?

PS: Das mit dem Sprite teste ich evtl. mal, danke.

**brandtmarke** · 09.12.2009, 16:22

*An den Kopf fass*

Richtig, du hast das ja über den Kassenselektor des li zugewisen, d.h. die Anweisung hat Vorrang ...

es müsste also:

Code:

#mainmenu .level_1 .holding li *,
#mainmenu .level_1 .holding li *:hover { background-image: none;}

heissen ...

**closeup** · 09.12.2009, 19:14

Hi,

selstam, auch das funktioniert nicht.
Sollte das nicht .level_2 heißen anstelle von .level_1?

Ich muss mir das morgen nochmal in Ruhe anschauen.

Beim Testen ist mir auch noch aufgefallen, dass beim hover über der 2. Ebene (.level_2) die Grafik auch dieselbe sein sollte wie wenn man über der 1. Ebene hovern würde. Momentan springt beim hovern auf der 2. Ebene die Grafik wieder zurück (also wie wenn Normalzustand wäre). Ich hoffe, das war jetzt einigermaßen verständlich.

Zur Veranschaulichung, wie es aussehen sollte:

Bild1: Normalzustand ohne hover (normale Grafik wird bei Ebene 1 angezeigt)
Bild2: Zustand bei hover auf .level_1 (Hovergrafik wird bei Ebene 1 angezeigt)
Bild3: Zustand bei hover auf .level_2 (Hovergrafik wird bei Ebene 1 angezeigt)

**brandtmarke** · 09.12.2009, 19:52

theoretisch sollte das funktionieren;

wenn mans mal ausführlich(er) schreibt siehts ja so aus:

Code:

div#mainmenu ul.level_1 li.holding li *

Der Wildcard Selektor spricht die kindelemente des li-Tags der 2ten Ebene an,
also ul > li > li > a und ul > li > li > span

das ul.level_2 sollte hier eigentlich nicht von nöten sein ...
Der Komplette Selektionspfad wäre

Code:

div#mainmenu ul.level_1 li.holding ul.level_2 li a,
div#mainmenu ul.level_1 li.holding ul.level_2 li a:hover,
div#mainmenu ul.level_1 li.holding ul.level_2 li span { ... }

ich hab das hier mal fix lokal nachgebaut und es funzt ...

hat das li der 2ten Ebene bei Dir auch die Klasse .holding?

Vielleicht hier nochmal das CSS und Markup dazu:

Code:

#mainmenu{width:792px;position:absolute;overflow:visible;background-color:#c7e1f2;z-index:999;}
#mainmenu .level_1 .holding a{background: url(images/1.gif) no-repeat 5px;}
#mainmenu .level_1 .holdinga:hover{background: url(images/1_on.gif) no-repeat 5px;}
#mainmenu .level_1 a,#mainmenu .level_1 span{display:block;padding-left:20px;font-weight:bold;text-decoration:none;color:#313131;}
#mainmenu p{margin:0;padding:0;}
#mainmenu ul{margin:0;padding:0;list-style-type:none;}
#mainmenu .level_1 li{width:150px;}
#mainmenu .level_2 li{width:180px;line-height:19px;}
#mainmenu .level_2 li a{font-weight:normal;color:#313131 !important;}
#mainmenu li{position:relative;float:left;background-color:#c7e1f2;border-bottom:1px solid #ffffff;line-height:26px;}
#mainmenu li ul{left:0px;right:0px;top:27px;position:absolute;display:none;}
#mainmenu li:hover ul,#mainmenu li.sfhover ul{display:block;}
#mainmenu li:hover,#mainmenu li.sfhover{background-color:#F46F21;}
#mainmenu .level_1 li:hover a,#mainmenu .level_1 li.sfhover a{color:#fff;}
#mainmenu .level_2 li:hover a,#mainmenu .level_2 li.sfhover a{font-weight:normal;color:#fff !important;}
#mainmenu .level_1 .holding li *,
#mainmenu .level_1 .holding li *:hover {
	background-image: none;
	color: aqua;
	border: 1px solid blue;
}

Code:

!-- indexer::stop -->
<div class="mod_navigation block" id="mainmenu">
	<a href="#skipNavigation1" class="invisible">Navigation überspringen</a>
	<ul class="level_1">
		<li class="active first"><span class="active first">Home</span></li>
		<li class="submenu holding"><a href="index.php/seite-1.html" title="Seite 1" class="submenu holding" onclick="this.blur();">Seite 1</a>
			<ul class="level_2">
				<li class="holding first last"><a href="index.php/seite-11.html" title="Seite 1.1" class="holding first last" onclick="this.blur();">Seite 1.1</a></li>
			</ul>
		</li>
		<li class="Klasse_2"><a href="index.php/seite-2.html" title="Seite 2" class="Klasse_2" onclick="this.blur();">Seite 2</a></li>
		<li class="last"><a href="index.php/seite-3.html" title="Seite 3" class="last" onclick="this.blur();">Seite 3</a></li>
	</ul>
	<a name="skipNavigation1" id="skipNavigation1" class="invisible">&nbsp;</a>
</div>
<!-- indexer::continue -->

**closeup** · 09.12.2009, 20:14

Hi, erstmal vielen Dank für Deine Mühe und die ausführliche Antwort.
Ich werde das morgen nochmal testen und dann die Ergebnisse hier schreiben.

hat das li der 2ten Ebene bei Dir auch die Klasse .holding?

Gerade mal im Firebug geschaut. Nein, das .li Element hat in der 2. Ebene keine Klasse zugewiesen. (???)

**closeup** · 10.12.2009, 15:56

Hi,

mit dieser Anweisung hat es tatsächlich funktioniert:

Code:

div#mainmenu ul.level_1 li.holding li *,
div#mainmenu ul.level_1 li.holding li *:hover{background-image:none;}

Nun muss ich es nur noch hinbekommen, dass bei Hover auf level_2 die 1. Ebene (also level_1) wieder den Normalzustand bekommt, also hellblauer Hintergrund. Momentan sieht es noch so aus wie in der angehängten Grafik.
Alternativ ginge es auch, wenn der Hover Zustand angezeigt, wird, nur muss dann natürlich auch die korrekte Grafik davor angezeigt werden.

Noch ein anderes Thema (damit das Menü absolut perfekt wird):

Ist es eigentlich möglich, dass wenn man sich auf einer Unterseite befindet (also irgendwo geklickt hat), man oben in der Hauptnavigation der jeweilige Menüpunkt der 1. Ebene gehightlighted ist, also so wie wenn man hovern würde?
Ich denke das wird schwierig, da ja TYPOlight in dem Fall keine Klasse mitliefert, z.B. .active (?)

Beispiel: Ich gehe im Menü auf "Karriere", daraufhin klappt das Menü nach unten auf und die Menüpunkte der 2. Ebene erscheinen. Dort gehe ich auf "Studenten". Die Seite "Studenten" wird nun angezeigt. Im Menü soll nun der Punkt "Karriere" orange hinterlegt werden.

Vielen Dank schonmal!

**brandtmarke** · 10.12.2009, 16:05

st es eigentlich möglich, dass wenn man sich auf einer Unterseite befindet (also irgendwo geklickt hat), man oben in der Hauptnavigation der jeweilige Menüpunkt der 1. Ebene gehightlighted ist, also so wie wenn man hovern würde?
Ich denke das wird schwierig, da ja TYPOlight in dem Fall keine Klasse mitliefert, z.B. .active (?)

Das wäre dann die Klasse .trail bzw. .trail:hover

**closeup** · 11.12.2009, 10:09

Ah, das ist ja schon mal gut, dass man das mit .trail beeinflussen kann.
Hintergrundfarbe und Textfarbe konnte ich so anpassen, nur die Hintergrundgrafik wird nicht korrekt angezeigt.

So müsste es doch eigentlich gehen:

Code:

#mainmenu .level_1 .holding .trail a {
color:#fff;
background: url(images/1_on.gif) no-repeat 20px;
}

Ein weiteres Problem ist, dass wenn man in der 1. Ebene klickt, das genauso formatiert werden soll.
Nur habe ich da nun gar keine Grafik mehr davor und auch die Hintergrund- und Schriftfarbe sind wieder in der Ausgangsposition. Das .trail wirkt sich ja nur bei Klick auf die 2. Ebene aus. Habe es mit .active versucht, habs aber nicht hinbekommen.

Vielen, vielen Dank für alle Tipps!

**brandtmarke** · 11.12.2009, 11:05

Ich hab mal ein bischen umgebaut, wenn ich dich richtig verstanden habe dann müsste das so aussehen:

Code:

#mainmenu{
	width:792px;
	position:absolute;
	overflow:visible;
	background-color:#c7e1f2;
	z-index:999;
	border-bottom: 1px solid #fff;
	height: 26px;
	}
#mainmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	}
#mainmenu li{
	position:relative;
	float:left;
	background-color:#c7e1f2;
	}
#mainmenu .level_1 li {
	width:150px;
	}
#mainmenu .level_1 a:link,
#mainmenu .level_1 a:visited,
#mainmenu .level_1 span {
	display: block;
	height: 26px;
	line-height: 26px;
	padding-left:47px;
	font-weight:bold;
	text-decoration:none;
	color:#313131;
	background: no-repeat #c8e2f3 22px 0;
	border-bottom: 1px solid #fff;
	}
#mainmenu .level_1 a:hover,
#mainmenu .level_1 a:active,
#mainmenu .level_1 a:focus,
#mainmenu .level_1 a.trail,
#mainmenu .level_1 span.active {
	background-position: 22px -26px;
	background-color: #f67318 ;
	color: #fff; 
}
#mainmenu .level_1 .holding a,
#mainmenu .level_1 .holding span.active {
	background-image: url(../images/01_holding.png);
	}

#mainmenu li ul{
	left:0px;
	right:0px;
	top:27px;
	position:absolute;
	display:none;
	}
#mainmenu .level_2 a:link,
#mainmenu .level_2 a:visited,
#mainmenu .level_2 span.active {
	width:180px;
	height: 19px;
	line-height:19px;
	padding-left: 25px;
	font-weight: normal;
	}
#mainmenu li:hover ul,
#mainmenu li.sfhover ul{
	display:block;
	}
#mainmenu .level_1 .holding li *,
#mainmenu .level_1 .holding li *:hover {
	background-image: none;
}

Dateipfade zu Deinen Images, Abstände, etc. müsstest Du natürlich anpassen ...

**brandtmarke** · 11.12.2009, 11:13

habs nochmal ein wenig optimiert:

Code:

#mainmenu{
	width:792px;
	position:absolute;
	overflow:visible;
	background-color:#c7e1f2;
	z-index:999;
	border-bottom: 1px solid #fff;
	height: 26px;
	}
#mainmenu ul{
	margin:0;
	padding:0;
	list-style-type:none;
	}
#mainmenu li{
	position:relative;
	float:left;
	background-color:#c7e1f2;
	width:150px;
	}
#mainmenu a:link,
#mainmenu a:visited,
#mainmenu span {
	display: block;
	height: 26px;
	line-height: 26px;
	padding-left:47px;
	font-weight:bold;
	text-decoration:none;
	color:#313131;
	background: no-repeat #c8e2f3 22px 0;
	border-bottom: 1px solid #fff;
	}
#mainmenu a:hover,
#mainmenu a:active,
#mainmenu a:focus,
#mainmenu a.trail,
#mainmenu span.active {
	background-position: 22px -26px;
	background-color: #f67318 ;
	color: #fff; 
}
#mainmenu .holding a,
#mainmenu .holding span.active {
	background-image: url(../images/01_holding.png);
	}

#mainmenu li ul{
	left:0px;
	right:0px;
	top:27px;
	position:absolute;
	display:none;
	}
#mainmenu li li {
	width: 180px;
	}
#mainmenu li li a:link,
#mainmenu li li a:visited,
#mainmenu li li span.active {
	height: 19px;
	line-height:19px;
	padding-left: 25px;
	font-weight: normal;
	background-image: none;
	}
#mainmenu li:hover ul,
#mainmenu li.sfhover ul{
	display:block;
	}

mal ne andere Frage: warum hast Du in der 2ten Ebene denn eine Breite von 180px? Gestalterisch so gewollt?

**closeup** · 11.12.2009, 13:31

Hi,

absolut genial! Ich bin dir echt super dankbar. Sogar mit der Sprite-Technik sieht das nun echt toll aus.

Nur wird noch in der 2. Ebene beim jeweils aktiven Menüpunkt ebenfalls eine Grafik angezeigt, diese soll ja nur in der 1. Ebene erscheinen.

Ja, das mit den 180px ist so gewollt. Bei Verwendung deiner CSS-Datei sind es 25px mehr, also 205. Habe das nun einfach auf 155px geändert, so dass es später bei der Anzeige 180px werden.

**brandtmarke** · 11.12.2009, 13:45

Dann ersetzte mal in dem Block

Code:

#mainmenu li li a:link,
#mainmenu li li a:visited,
#mainmenu li li span.active {
	height: 19px;
	line-height:19px;
	padding-left: 25px;
	font-weight: normal;
	background-image: none;
	}

die Zeile#mainmenu li li span.active durch

Code:

#mainmenu li li.active span.active

Dadurch sollte background-image:none wieder Vorrang haben ...

**closeup** · 11.12.2009, 14:41

Hey super,
nun kann ich beruhigt ins Wochenende gehen.

Klappt nun wunderbar! Besten Dank für alles.

Im IE6 werden die Grafiken nicht angezeigt, aber das kann ich verschmerzen.

Noch ein Tipp für diejenigen, die so ein Menü ebenfalls umsetzen wollen:
Für den IE muss man folgenden Code noch angeben, damit das Aufklappmenü im Vordergrund angezeigt wird.

Code:

#header {
  position: relative;
  z-index: 1;
  }
#container {
  width: 100%;
  }

**closeup** · 16.12.2009, 15:56

Hi,

leider muss ich hier nochmal was fragen. Und zwar sollte nun bei .level_1 der untere 1px breite Rahmen nicht angezeigt werden. Nur bei den Untermenüpunkten, also .level_2

Wie bekomme ich den dort weg?

Code:

#mainmenu a:link,#mainmenu a:visited,#mainmenu span {
height:26px;
display:block;
padding-left:47px;
border-bottom:1px solid #fff;
font-weight:bold;
text-decoration:none;
color:#313131;
line-height:26px;
background: no-repeat #c8e2f3 22px 0; }

Besten Dank im voraus.