Liste der Anhänge anzeigen (Anzahl: 1)
Dreieck hinter Menüpunkte? [Erledigt]
Hallo Zusammen,
wie ist es möglich hinter Menüpunkte (nur 1 Ebene) ein rotes, nach unten zeigendes Dreieck zusetzen (siehe Screenshot)?
Mir ist unklar wie ich ein Bild oder ein CSS-Skript auf die Menüpunkte bekomme, da diese ja durch die Seitenstruktur generiert werden.
Freue mich über einen Tipp!
Danke im Voraus und Grüße
pixelschubse
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo, danke für das nette Willkommen,
mit einem Hintergrundbild habe ich es als erstes ausprobiert. Mit mässigem Erfolg (siehe Screenshot). Das Dreieck hängt nicht hinter dem Text und es wird auch auf die zweite Ebene vererbt (was ich nicht möchte).
Any ideas?
Hier das CSS zum besseren Verständnis:
Code:
/* Horizontale Navigation */
#header .mod_navigation {
width:960px;
float:left;
margin:0;
padding:0 0 0 112px;
color:#333;
letter-spacing:0.1em;
}
#header .mod_navigation ul {
margin:0;
padding:0;
list-style-type:none;
}
#header .mod_navigation li {
width:auto;
float:left;
margin:0;
padding:0 58px 0 0;
text-decoration:none;
}
/* Dreieck für Menüpunkte 1 Ebene */
#header .mod_navigation .level_1 li {
background:url("tl_files/triangle.png") right top no-repeat;
}
/* Aussehen Menüpunkte 1 Ebene */
#header .mod_navigation a {
display:block;
padding:0 0 15px;
text-decoration:none;
color:#333;
}
/* Listenelement in Ebene 2 clearen */
#header .mod_navigation ul.level_2 li {
clear:both;
padding-top:13px;
font-size:0.8em;
}
/* 2 Ebene verstecken */
#header .mod_navigation ul.level_2 {
width:0;
height:0;
left:-32768px;
top:-32768px;
position:absolute;
}
/* 2 Ebene einblenden */
#header .mod_navigation li:hover ul.level_2 {
width:auto;
height:auto;
left:auto;
top:auto;
display:block;
}
/* Aussehen Menüpunkte 2 Ebene */
#header .mod_navigation ul.level_2 a {
display:block;
padding:0;
text-decoration:none;
color:#666;
}
#header .mod_navigation ul.level_2 a:hover, #header .mod_navigation ul.level_2 a:active {
color:#c00;
}
Danke und Gruß
pixelschubse
Liste der Anhänge anzeigen (Anzahl: 2)
Funktioniert ja grundsätzlich; wie schon erwähnt den Pfeil via
Code:
#header .mod_navigation ul.level_2 li {
clear:both;
padding:6px 16px;
font-size:0.8em;
background: none;
}
für die 2te Ebene entfernen.
Ich bin mal über Dein Stylesheet grob drüber:
Code:
/* Horizontale Navigation */
#header .mod_navigation {
width:960px;
float:left;
margin:0;
padding:0 0 0 112px;
color:#333;
letter-spacing:0.1em;
box-shadow: 0 5px 3px #9b9b9b;
}
#header .mod_navigation ul {
margin:0;
padding:0;
list-style-type:none;
}
#header .mod_navigation li {
width:auto;
float:left;
margin:0 90px 0 0;
padding:0 22px 0 0;
text-decoration:none;
}
/* Dreieck für Menüpunkte 1 Ebene */
#header .mod_navigation .level_1 li {
background:url("triangle.png") right 5px no-repeat;
}
/* Aussehen Menüpunkte 1 Ebene */
#header .mod_navigation a {
display:block;
padding:0 0 15px;
text-decoration:none;
color:#333;
}
/* Listenelement in Ebene 2 clearen */
#header .mod_navigation ul.level_2 li {
clear:both;
padding:6px 16px;
font-size:0.8em;
background: none;
}
/* 2 Ebene verstecken */
#header .mod_navigation ul.level_2 {
width:0;
height:0;
left:-32768px;
top:-32768px;
position:absolute;
box-shadow: 0 5px 3px #9b9b9b;
background: #fff;
}
/* 2 Ebene einblenden */
#header .mod_navigation li:hover ul.level_2 {
width:auto;
height:auto;
left:auto;
top:auto;
display:block;
}
/* Aussehen Menüpunkte 2 Ebene */
#header .mod_navigation ul.level_2 a {
display:block;
padding:0;
text-decoration:none;
color:#666;
}
#header .mod_navigation ul.level_2 a:hover, #header .mod_navigation ul.level_2 a:active {
color:#c00;
}
Sieht dann aus, wie im Screenshot; das Dummy HTML und CSS hab ich auch nochmal angehängt
Gruß
Dennis
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo Dennis,
habe mein Stylesheet jetzt umgebaut, sieht grundsätzlich schon mal gut aus.
Eine Frage habe ich trotzdem noch: Ich würde gerne die weisse Fläche der zweite Menüebene nicht so breit laufen lassen und die Typo linksbündig mit der obersten Menüpunkt setzen.
Ich habe alle möglichen Werte verändert. Aber das Menü zeigt sich unbeeindruckt. Oder die erste Ebene verrutscht total.:(
Gibt es eine Möglichkeit nur den Home-Button ohne Dreieck anzeigen zulassen?
Danke und einen schönen Abend
pixelschubse
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo!
Ich habe das Menü jetzt fertiggestellt (Screen zur Ansicht ist angehängt).
Nochmals vielen Dank an Dennis für den tollen Support.
Eine Sache lässt mich trotzdem nicht los. Ich würde gerne den Menüpunkt „Home“ an den Schluß der Menüleiste setzen. Über die Seitenstruktur kein Problem. Aber dann ist Home plötzlich ein normaler Menüpunkt inkl. Mouseover etc.
Wie vermeide ich dies?
Danke im Voraus
pixelschubse