Dreieck hinter Menüpunkte? [Erledigt]

**pixelschubse** · 03.09.2012, 12:45

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

**planepix** · 03.09.2012, 12:56

Hallo pixelschubse,

willkommen im Forum.

Das lässt sich mit CSS erreichen; Stichwort Hintergrundbild dem Listenelement der ersten Ebene zuordnen,
als Ansatz in dieser Art:

Code:

#mainnav .level_1 li
{
background:url("tl_files/layout/dreieck.gif") no-repeat to right;
}

Edit:
korrigierte Version:

Code:

#mainnav .level_1 li
{
background:url("tl_files/layout/dreieck.gif") no-repeat top right;
}

**qba** · 03.09.2012, 13:18

Code:

no-repeat top right;

**planepix** · 03.09.2012, 13:31

stimmt :-) danke

**pixelschubse** · 03.09.2012, 13:39

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

**planepix** · 03.09.2012, 13:44

Hallo pixelschubse,

versuch mal für das 2. Level ein:

Code:

background:none;

Sonst gerne Live-Link, dann geht das schneller mit helfen.

**brandtmarke** · 03.09.2012, 14:58

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

**pixelschubse** · 03.09.2012, 15:57

Hi,

durch das ganze Testen ist mein Stylesheet total durcheinander geraten.

Ich werde es jetzt aufräumen und eure Vorschläge berücksichtigen.

Schonmal vielen Dank für eure Mühe.

Gruß
pixelschubse

**pixelschubse** · 03.09.2012, 18:49

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

**do_while** · 03.09.2012, 18:55

Viel hilfreicher als angehängte Bilder wäre ein Link zur Seite, da man dann selbst den Aufbau sehen kann.
Hast Du Dir das Menü in Firefox oder Chrome einmal mit der Erweiterung Firebug angesehen? Da kann man live die Klassen anpassen und sieht sofort was dabei passiert.

Wenn Du die Standard-Navigation von Contao nutzt, müßte der erste Eintrag (= Home) zusätzlich die Klasse "first" haben. So kannst Du im CSS für das Home-Menü den Hintergrund ohne Pfeil setzen.

**brandtmarke** · 03.09.2012, 19:35

Ich hab mal etwas aufgeräumt und umgebaut; paddding und pfeil auf das <a> gelegt und beides für die zweite Ebene wieder resetet. das aus-/einblenden der zweiten Ebene geschieht nun ein display: none bzw. display: block

Code:

/* Horizontale Navigation */
#header .mod_navigation {
    width:960px;
    float:left;
    margin:0;
    padding-left: 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 {
    float:left;
}

/* Aussehen Menüpunkte 1 Ebene */
#header .mod_navigation a {
    display:block;
    padding:0 22px 16px 16px;
    text-decoration:none;
    color:#333;
    background:url("triangle.png") right 5px no-repeat;
}

/* Listenelement in Ebene 2 clearen */
#header .mod_navigation ul.level_2 li {
    float: none;
    padding:6px 16px;
    font-size:0.8em;
}

/* 2 Ebene verstecken */
#header .mod_navigation ul.level_2 {
	position: absolute;
    display: none;
    box-shadow: 0 5px 3px #9b9b9b;
    background: #fff;
    
}

/* 2 Ebene einblenden */
#header .mod_navigation li:hover ul.level_2 {	
    display:block;
}

/* Aussehen Menüpunkte 2 Ebene */
#header .mod_navigation ul.level_2 a {
    display:block;
    padding:0;
    text-decoration:none;
    color:#666;
    background: none;
}

#header .mod_navigation ul.level_2 a:hover, #header .mod_navigation ul.level_2 a:active {
    color:#c00;
}

den Home button ohne Pfeil bekommst du hin, indem Du der Seite eine Klasse, z.B. "home" gibts, die Klasse bekommt dann auch das li und das a in der navigation, also:

Code:

#header .mod_navigation a.home { background: none; padding-right: 0;}

bzw. wenn es wie gesagt der erste Eintrag ist, über die Klasse .first

Code:

#header .mod_navigation a.first { background: none; padding-right: 0;}

Wenn Du grundsätzlich alle Menüpunkte, die keine Unterpunkte haben, ohne Pfeil haben möchtest, kannst du die Klasse .submenu benutzen, um nur den Menüpunkten mit Untermenü den Pfeil zuzuweisen:

Code:

#header .mod_navigation a {
    display:block;
    padding:0 0 16px 16px;
    text-decoration:none;
    color:#333;
}
#header .mod_navigation .submenu a {
    background:url("triangle.png") right 5px no-repeat;
padding-right: 22px;
}

**pixelschubse** · 05.09.2012, 11:34

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

**brandtmarke** · 05.09.2012, 13:34

Grundsätzlich sind ja alle Menüpunkte "normale" Menüpunkte. Beim Aufrufen der Site ist "Home" ein <span> Element mit der Klasse .active und hat - sofern nicht anders definiert - dementsprechend auch ein anderes Verhalten beim Mouseover als die <a>-Elemente im Menü. Dadurch, dass Du "Home" in der Seitenstruktur ans Ende geschoben hast, ist die Seite der Sache nach nicht mehr die Startseite und demzufolge beim Aufruf der "neuen" Startseite (eben die, die als erstes in der Seitenstruktur steht) ein <a>-Element.

Um "Home" als Startseite (also erste Seite in der Seitenstruktur) zu belassen und trotzdem rechts zu positionieren könntest Du die <li> mit float:right zu floaten;
Eine andere Möglichkeit wäre es, "Home" im normalen Menü zu verstecken und über eine individuelle Navigation in ein eigenes Modul zu packen. das kannnst du dann im Layout hinter dein Haputnavigationsmodul einbinden und via CSS ausrichten/positionieren.

Mann könnte auch über das Template zu gehen, das würde ich aber nicht machen...

**pixelschubse** · 05.09.2012, 17:02

Danke.

Hat mit float:right funktioniert.

Gruß
pixelschubse

**pixelschubse** · 06.09.2012, 14:12

Hi!

Im IE ist das Menü über float:right nicht ideal positioniert. Habe daher einen mod:customnav erstellt und mit absoluten Werten positioniert. Auf dem Mac sieht es gut aus.

Frage: Muss ich den neuen Button absolut positionieren oder kann ich den auch in den „Float“ hängen? (Bei meinen Tests hat es nicht gefunzt!) In der Annahme das ich dann automatisch gleiche Abstände zwischen allen Menüpunkten habe. So habe ich „Home“ zur Zeit einfach rechts aufgehängt.

Danke
pixelschubse