CSS Frage

Hallo,

ich habe auf einer neuen Seite folgendes CSS3 Dropdown Menü eingebaut.
Die 1. Menüebene funktioniert zwar aber beim 1. Punkt "Essen und Trinken" sollte eigentlich ein Untermenü erscheinen.

Ich habe das Tutorial auch schon auf einer blanken HTML Seite erstellt und das CSS dazu, da funktioniert das einwandfrei.

Ich tippe mal stark, dass es an den Klassen liegt. Dass ich bei meiner Seite statt ".menu" "#header .mod_navigation" verwenden muss, ist mir schon klar.
Ausserdem ist mir per Firebug aufgefallen, dass die UL´s eigentlich "level_1 sf-menu" bzw "level_2 sf-menu" heissen. Im Contao Buch von Peter Müller wurde das Untermenü jedoch nur mit ".level_2" angesprochen, und funktioniert trotzdem?

Also ich habs leider noch nicht zum laufen bekommen, obwohl ich sicher bin, dass der Fehle rnur in der Benennung defr Klassen im CSS liegt, kann mir da vielleicht wer nen Schubs geben? :)

EDIT: ist wohl besser, den CSS Coder, der das Menü betriftt hier auch zu hinzuschreiben ;)

Code:

---

#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
#header .mod_navigation {
    height: 40px;
    width: 960px;
 
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
#header .mod_navigation ul.level_1 li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
#header .mod_navigation ul.level_1 li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
 
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
 
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
 
#header .mod_navigation ul.level_1 li:hover > a { color: #8fde62; }

#header .mod_navigation ul.level_2 {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

#header .mod_navigation li:hover > ul.level_2 { opacity: 1; }

#header .mod_navigation ul.level_2 li {
    height: 0;
    overflow: hidden;
    padding: 0;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

#header .mod_navigation li:hover > ul.level_2 li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

#header .mod_navigation ul.level_2 li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
 
    border: none;
    border-bottom: 1px solid #353539;
}
 
#header .mod_navigation ul.level_2 li:last-child a { border: none; }

---

Das CSS ist ohne das HTML meist nicht wirklich aussagekräftig.

Kannst du dein Beispiel nicht irgendwo irgendwie online stellen?

In dem von dir verlinkten CSS3-Beispiel ist .menu die äußere ul.menu. Von daher ist dein Satz, dass du statt ".menu #header .mod_navigation" verwenden musst, nicht ganz richtig. Dem .menu aus dem Beispiel entspricht in Contao .level_1. Probiere es damit dann einmal.

Hallo Peter,

Danke erstmal. In meinem Eingangspost ist die Seite verlinkt, auf der ich das Menü eingebaut habe. Kurz vor dem link zum Tutorial ;)

Jetzt wo ich die Tomaten von den Augen genommen habe, sehe ich es aus.

However, der Fehler bleibt der, den ich oben schon genannt hatte. Der Selektor .menu aus dem Tutorial ist in Contao NICHT #header .mod_navigation, sondern #header .mod_navigation ul.level_1. Probiere es aus ;)

habe jetzt mal alle Selektoren, die die 1. Ebene betreffen, mit level_1 erweitert und die 2. Ebene mit level_2

Code:

---

#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
 
#header .mod_navigation ul.level_1 {
    height: 40px;
    width: 960px;
 
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
#header .mod_navigation ul.level_1 li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
#header .mod_navigation ul.level_1 li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
 
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
 
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
 
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
 
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
 
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
 
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
 
#header .mod_navigation ul.level_1 li:hover > a { color: #8fde62; }

#header .mod_navigation ul.level_2 {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

#header .mod_navigation li:hover > ul.level_2 { opacity: 1; }

#header .mod_navigation ul.level_2 li {
    height: 0;
    overflow: hidden;
    padding: 0;
 
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}

#header .mod_navigation li:hover > ul.level_2 li {
    height: 36px;
    overflow: visible;
    padding: 0;
}

#header .mod_navigation ul.level_2 li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
 
    border: none;
    border-bottom: 1px solid #353539;
}
 
#header .mod_navigation ul.level_2 li:last-child a { border: none; }

---

der Unterschied zu meinem Code von vorher ist eigentlich nur im 1. grösseren Codeblock, wo die Höhe von 40px und die Breite von 960px definiert sind, hier habe ich von "#header .mod_navigation" auf "#header .mod_navigation ul.level_1" geändert, bei allen anderen Selektoren hatte ich das schon.

Jetzt mir dem Ergebnis, dass das Titelbild etwas nach unten geschoben wurde, mit dem Firebug sieht es so aus als da wo ein Padding nach unten greifen würde, aber ich finde einfch nicht, wo. Aber man sieht, dass das Menü nach unten ausklappen würde, jedoch genau da abgeschnitten, wo das Titelbild anfängt. Anfangs dachte ich, dass das Menü vielleicht hinter dem Bild ausklappt, aber auch wenn ich das Bild per Magrin viel weiter runtersetze, wird das Menü trotzdem an der besgaten Kante abgeschnitten :/

Du hast ja einen Link zu deiner Seite gepostet, dann brauchst du hier nicht mehr tonnenweise CSS zu posten ;-)

Der Punkt ist, dass das Beispiel eine anderen HTML-Struktur hat als das von Contao erzeugte Menü, und von daher passte das CSS nicht. Wenn du den einen einzigen Style geändert hast, den ich dir beschrieben hatte, dann klappt das Ding raus.

Das es hinter das Bild klappt ist ziemlich sicher ein ganz neues Problem, vermute ich jedenfalls mal so. Das müsste man dann neu untersuchen. Wahrscheinlich liegt das eher an einer z-index-Geschichte.


EDIT
Es hat nichts mit z-index zu tun. Es liegt irgendwie an deinem nav.mod_navigation. Am unteren Ende von nav wird das Menü abgeschnitten. Wenn ich das auf height:300px oder sowas setze, dann wird das nicht mehr abgeschnitten.

Räume dein CSS einfach mal ein bisschen auf. Und denke beim Aufräumen drüber nach, was genau diese Anweisungen da gerade machen. Vielleicht findest du ja so die richtige Stelle, die das abschneidet. Im ersten Style steht z. B. drei Mal #header .mod_navigation. Das ist mindestens zwei Mal zuviel ;)

EDITEDIT
Und beim Aufräumen solltest du auch noch gleich das span.active gestalten. Du hast nur Links (a) im CSS, aber Contao ersetzt den aktiven Menüpunkt ein span. Die Reihenfolge ist immer ERST das HTML verstehen, dann das CSS schreiben. Und dabei nachdenken. So lernt man ;)

So, nu funktioniert dat Ding :)

Standardmässig ist ".block" auf "overflow:hidden" gesetzt, das jetzt auf visible gesetzt und nun sieht man das Menü in voller Pracht.

Du hast Recht, ich hatte im 1. Style 3 mal "#header .mod_navigation", hatte da beim rumprobieren mal blöderweise einmal das "ul" und einmal das "li" dahinter gelöscht.
So haben sie nun wieder alle ihre Daseinsberechtigung ;)

Das mit dem Spanactive kommt noch, ich muss ja sowieso die Navigation noch anpassen was Farben und Breiten bzw Höhen angeht, aber ich wollte erst mal, dass es funktioniert :)

Schön, dass es funktioniert.

Aber ich würde trotzdem noch mal ein bisschen experimentieren und untersuchen. Auf meiner Beispielsite zu Contao 3 funktioniert das Dropdown auch wunderbar, ohne dass overflow:hidden geändert wurde.

Das overflow:hidden in der Klasse .block stammt übrigens aus dem Contao-CSS-Framework (genau genommen aus assets/contao/css/layout.css). Da ist es drin, damit gefloatete Elemente automatisch umschlossen werden: Containing Floats mit overflow:hidden (auf little-boxes.de)

Es hat aber auch Nachteile:

Zitat:

---

Bei der gleichzeitigen Verwendung von position:relative für dasselbe Element oder in Verbindung mit einer fest definierten Höhe (height) ist diese Methode riskant und kann zu abgeschnittenen Inhalten führen ... (Das große Little Boxes-Buch, Seite 329)

---

CSS lernt man nicht nur durch Trial and Error ;)

Zitat:

---

Zitat von pmmueller

Auf meiner Beispielsite zu Contao 3 funktioniert das Dropdown auch wunderbar, ohne dass overflow:hidden geändert wurde.

---

Das liegt den unterschiedlichen Bezugspunkten für die absoluten Positionierungen.
Auf deiner Seite liegt der Containing Block für die ausklappenden ul außerhalb von nav.block.
Auf Madobs Seite sind die li der Containing Block

Code:

---

.mod_navigation ul.level_1 li {
position: relative;

---

Zitat:

---

Zitat von plastiko

Das liegt den unterschiedlichen Bezugspunkten für die absoluten Positionierungen.

---

Stimmt. Das ist wahrscheinlich ein relevanter Unterschied.

Bei mir hat nur #header .inside das position:relative aus dem CSS-Framework. Die Werte zur absoluten Positionierung von ul.level_2 setze ich wieder zurück auf auto, sodass das Element beim Hovern dort auftaucht, wo es normalerweise auch stehen würde, wenn es im Fluss wäre.

So, ich habe das Menü nun mal so gestaltet wie es dann ungefähr sein soll, funktioniert auch in allen Browsern wunderbar.

Die Internet Explorer 8 abwärts haben halt wohl das Problem, dass sie die Befehle nicht verstehen, dass der letzte Border nicht angezeigt werden soll.

Nur habe ich gerade festgestellt, dass die Variante so nicht mit dem iPhone funktioniert. Es klappt zwar das Menü aus, aber es wird auch sofort die Seite geöffnet, mit der der obere Menüpunkt verlinkt ist. Hat dazu jemand eine Idee?

Zitat:

---

Zitat von Madob

Hat dazu jemand eine Idee?

---

Kein Dropdown-Menü ;)

Im Ernst. Das Menü ist doch auf einem Phone wahrscheinlich sowieso entweder zu breit oder - wenn die Menüpunkte untereinander stehen - zu hoch.

Du kannst mit Contao doch ein spezielles Seitenlayout für mobile Seiten definieren, und da servierst du dann für die smarten Phones ein angemessenes Menü. Am einfachsten ist eine Select-Liste. Schau dir die Beispielsite zu meinem Buch mal auf einem "Telefon" an.

ich weiss zu schätzen, dass jetzt viele gerne Ihre Seite responsive gestalten bzw ein eigenes Layout für mobile Geräte entwerfen.

Nur diese Seite hier wird definitiv kein zweites Layout erhalten. Ich persönlich finde statische Grössen garnicht schlimm. Wenn ich auf einer Webseite die Wahl zwischen Desktop- und Mobilversion habe, wähle ich immer die Desktopvariante, die ist mir ersten vertrauter und ich bin mir sicher, dass ich den kompletten Inhalt sehe. Aber das soll ja an dieser Stelle nicht das Thema sein.

Und beim Dropdownmenü deiner Besipielseite klappt ja auch erst das Menü auf beim 1. Tippen und erst beim 2. Tippen wird der Menüpunkt dann wirklich geöffnet, von daher muss es ja möglich sein ;)

Zitat:

---

Zitat von Madob

Und beim Dropdownmenü deiner Besipielseite klappt ja auch erst das Menü auf beim 1. Tippen und erst beim 2. Tippen wird der Menüpunkt dann wirklich geöffnet, von daher muss es ja möglich sein ;)

---

Dann musst du wohl beide Varianten genau untersuchen und schauen wo die Unterschiede liegen ;)

naja Unterschiede gibt es da wohl -wie du und plastiko oben schon geschrieben habt - schon im Grundsatz des Dropdowns einige.

mal sehn

wenn ich das so richtig sehe, funktionieren die Dropdowns ja auch ganz anders. Deines ist am Anfang soweit verschoben, dass man es einfach nicht sieht und das anders ist ja eigentlich schon in Position, nur klappt es eben erst aus wenn man hovert.

In diesem Beitrag hat Jutta Kemperle (aka juke) noch ein paar Beispiele für Dropdowns mit Transition:

https://community.contao.org/de/show...mit-transition

Da hat vor ein paar Tagen auch jemand namens "Madob" kommentiert sehe ich gerade ;-)

jap, da hat auch dieser Madob kommentiert ;)

aber das Menü hab ich dann leider doch wieder aussen vor gelassen, weil es leider schon aufgeklappt hat, obwohl man mit der Maus weit unter dem Menü schon vorbeigefahren ist. Das war dann auch nicht so das Wahre. Leider...

kann man diesen oberen Menüpunkt nicht dazu missbrauen, dass er lediglich dem Ausklappmenü dient?

Denn dahinter sollen sich eigentlich gar keine Inhalte befinden.

Hab schon versucht, eine Weiterleitung auf eine externe Seite anzugeben, und als Blindlink einfach # einzugeben, was jedoch immer dazu führt, dass die Startseite geöffnet wird.

Du kannst diesen Menüpunkt in Contao in der Seitenstruktur als "interne" Weiterleitung definieren, zum Beispiel auf die erste Unterseite. Wenn dann einer draufdrückt/klickt kommt er direkt auf die Unterseite.

Aber da arbeitest du eher auf der falschen Baustelle. Deine Probleme liegen eher beim CSS ;)

hallo,

ja, das ist klar, da würde dann trotzdem eine Seite geöffnet.