Navigation / Pfeil

Solander · #1 (**permalink**) 07.08.2010, 11:04

Servus,

eigentlich sollte es kein Problem sein, aber ich komme nicht drauf. Ich will (wie im Anhang gezeigt) den aktuellen Menüpunkt (und bei hover) mit einem Pfeil nach unten kennzeichnen. Jetzt könnte ich dafür natürlich ganz ein Bild dafür verwenden, aber schöner wäre es, wenn ich nur Farben und halt die Spitze von dem Pfeil als Hintergrundbild hätte.
Hier seht ihr wie es bis jetzt aussieht/umgesetzt wurde.

Für einen Ansatz wäre ich sehr dankbar!

threadi · #2 (**permalink**) 07.08.2010, 11:35

Wie du schon sagst: Pfeil selbst als Grafik, diese als Hintergrundbild an den Link hängen und nur bei Hover einblenden.

Solander · #3 (**permalink**) 07.08.2010, 11:46

Problem war jetzt, dass das hintergrundbild ja innerhalb des Listenelements ist und nicht darunter. Habe folgenden Code verwendet:

#nav .level1 li a:hover, #nav .level1 li a.current{
background: #fff url(nav_pfeil.png) center bottom no-repeat;
}

threadi · #4 (**permalink**) 07.08.2010, 11:48

Dann erweitere den Link um die Höhe die Du brauchst nach unten.

heiko_rs · #5 (**permalink**) 07.08.2010, 12:07

Wenn das Ganze im IE 6 laufen soll, würde ich padding-bottom von a bei :hover um die Höhe des Pfeils erhöhen, durch neg. margin-bottom ausgleichen und den Pfeil (plus hellblauem BG über die volle Breite) per Grafik kommen lassen.

Andernfalls hat li padding-bottom und bekommt bei li:hover den Pfeil (die Grafik muss hier nicht die volle Breite haben).

Solander · #6 (**permalink**) 07.08.2010, 14:18

Danke!

Ich habe es jetzt so

Code:

#nav .level1 li.active{
    background:url(nav_pfeil.png) center bottom no-repeat;
	padding-bottom:13px;
}
#nav .level1  li a:hover, #nav .level1  li a.current{
    background: #fff;	
}

Zwar funktioniert es bei :hover noch nicht, aber ok. Habe es aber noch nicht in verschiedenen Browsern getestet.

Danke euch nochmals!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Float-Problem?	mischaef	CSS	33	20.10.2010 16:20
Problem mit FlyOut Menu im IE7	quarki69	CSS	5	15.03.2010 15:46
Javascript UL Navigation im IE6	ven	CSS	7	29.04.2008 15:29
Container mit 2 Container darin -> Hintergrund anzeigen	bendar	CSS	4	05.04.2005 18:18