DropDown Menü konfigurieren

[robe56]

Hallo,

ich habe das Horizontale DropDown Menü aus dem Buch "Webseiten gestalten mit Contao 3" von P. Müller nachgebaut.

Funktioniert technisch soweit tadellos.

Allerdings würde ich gerne 2 Dinge ändern und weiss leider nicht wie.

1. Wie erreiche ich es, das nur die Links des Sub-Menüs aktiv sind und nicht der Link aus der obersten Ebene?
2. Hätte ich gerne, das die Links im Sub-Menü linksbündig ausgerichtet sind, also in einer Linie mit dem Link der obersten Ebene, wie erreiche ich das?

Vielen Dank im voraus für Eure Hilfe.

mfg
Rolf

[MiTsch]

Hallo robe56,

1. Wie erreiche ich es, das nur die Links des Sub-Menüs aktiv sind und nicht der Link aus der obersten Ebene?

Schau mal hier.

2. Hätte ich gerne, das die Links im Sub-Menü linksbündig ausgerichtet sind, also in einer Linie mit dem Link der obersten Ebene, wie erreiche ich das?

Hast Du ein Link zum "Problem" ?

Viele Grüße
MiTsch

[robe56]

Vielen Dank, der Tipp war sehr gut.

Punkt 2 hat sich erledigt, ich hatte mich im CSS verschrieben.

mfg
Rolf

[peter64]

Hallo Rolf,

zur 1. Frage:

Da musst Du in Deiner css-Datei folgendes löschen:

#header .mod_navigation .trail

P. Müller schreibt dazu:
"Die Klasse trail sorgt dafür, dass auch der übergeordnete Menüpunkt hervorgehoben wird, wenn später ein Unterpunkt aktiv ist."

Edit: Ich sehe gerade, dass das Problem schon gelöst ist.

Gruß Peter

[Stefan01]

Hallo liebe Community,


ein kleines (wahrscheinlich sehr simples) Problem habe ich ebenfalls mit dem Menü. Das Menü an sich läuft wunderbar nur habe ich das ganze versucht mit transitions anzupassen, damit das Menü nicht so statisch daherkommt.

Mein Problem ist, wie schaffe ich es, dass bei li:hover im submenu der ganze Bereich abgedeckt wird und nicht die Hintergrundfarbe (Magenta) zu sehen
ist.

Bild_1.jpg

Bild_2.jpg

Sehr fein wäre natürlich auch noch das Untermenü über transform ein- bzw. auszublenden. Ich habe versucht das CSS dieser Demo in mein CSS zu integrieren, was leider nicht so ganz geklappt hat, deswegen habe ich das auch verworfen. Das Menü findet Ihr hier.

CSS:

#header .mod_navigation {
    width:72.5%;
    margin-top:2em;
    margin-left:10em;
    padding-left:23em;
    background-color:#E82C0C;
    border-radius:4px;
    font-family:Roboto Slab,sans_serif;
    color:#fff;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
#header .mod_navigation ul {
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
}
#header .mod_navigation li {
    float:left;
    margin:0;
    transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    -webkit-transition: background-color 1s;
}
#header .mod_navigation li:hover {
    background-color:#2B2B2B;
}
#header .mod_navigation a,
#header .mod_navigation span {
    display:block;
    padding:0 20px;
    line-height:50px;
    text-decoration:none;
    color:#ececec;
}
#header .mod_navigation .active,
#header .mod_navigation .trail {
    font-weight:bold;
    color:#fff;
}
#header .mod_navigation .a:hover,
#header .mod_navigation .a:focus {
    text-decoration:underline;
    color:#fff;
}
--------------------------Hauptnavigation 2. Ebene
ausblenden--------------------------
* {
}
#header .mod_navigation .level_2 {
    left:-32768px;
    top:-32768px;
    position:absolute;
    overflow:hidden;
    display:inline;
    background-color:#E80C7A;
}
--------------------------Listenelemnte 2.Ebene
untereinander--------------------------
* {
}
#header .mod_navigation .level_2 li {
    clear:both;
}
#header .mod_navigation li:hover .level_2 {
    width:auto;
    height:auto;
    min-width:78px;
    left:auto;
    top:auto;
    overflow:auto;
    display:block;
    z-index: 1000
}
--------------------------Hyperlinks und span
gestalten--------------------------
* {
}
#header .mod_navigation .level_2 a,
#header .mod_navigation .level_2 span {
    font-size:13px;
    line-height:32px;
    font-weight:normal;
}
--------------------------Aktiven Menüpunkt
hervorheben--------------------------
* {
}
#header .mod_navigation .level_2 span.active {
    font-weight:bold;
}

Ich bedanke mich an dieser Stelle schonmal und hoffe auf eine schnelle Antwort.


Viele Grüße, Stefan

[kos]

Kannst du uns einen Link zur Verfügung stellen, dann hilft es sich leichter!

[Stefan01]

Danke für die Antwort, aber die Seite ist noch nicht online, sie liegt auf meinem Rechner unter Mamp.


Gesendet von iPhone mit Tapatalk

[Stefan01]

Hallo,

die Seite ist jetzt online http://contao.kaufhaus-x.de/ , allerdings noch sehr grobe Rohversion. Für Hilfe bin ich
schonmal im Voraus sehr dankbar.

Viele Grüße

Stefan

[kos]

Hallo Stefan,

versuche mal

#header .mod_navigation .level_2 li{
  float:none;
}

[Stefan01]

Hallo und guten Morgen Karl,


Danke erstmal für Deinen Tipp, hat aber leider nichts gebracht.



Viele Grüße

Stefan

[kos]

Also das verstehe ich jetzt nicht, bei mir geht das.
Siehe screeshot.



Hast du den Code aus #9 denn auch nach der Anweisung

#header .mod_navigation li {
  float: left;
  transition: background-color 1s;
  -moz-transition: background-color 1s;
  -o-transition: background-color 1s;
  -webkit-transition: background-color 1s;
}

eingefügt? Das float:left der ersten Ebene muss wieder aufgehoben werden.

[Stefan01]

Hallo Karl,


herzlichen Dank! Es lag doch an der Reihenfolge der Anweisungen. Hatte nämlich mit dem float:none bereits einen Versuch gestartet.
Wünsche Dir ein schönes Wochenende und eine frohe und besinnliche Weihnachtszeit


Viele Grüße

Stefan

[kos]

Wünsche Dir ein schönes Wochenende und eine frohe und besinnliche Weihnachtszeit

Das wünsche ich Dir auch!