Liste der Anhänge anzeigen (Anzahl: 1)
Listenpunkte als Grafik bei Submenü und Vererbung
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;}
Liste der Anhänge anzeigen (Anzahl: 3)
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)
Liste der Anhänge anzeigen (Anzahl: 1)
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): :D
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!
Liste der Anhänge anzeigen (Anzahl: 1)
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 ...