DropDown Menü konfigurieren
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
Liste der Anhänge anzeigen (Anzahl: 2)
Gleiches Menü - anderes Problem
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.
Anhang 14860
Anhang 14861
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:
Code:
#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
Liste der Anhänge anzeigen (Anzahl: 1)
Also das verstehe ich jetzt nicht, bei mir geht das.
Siehe screeshot.
https://community.contao.org/de/atta...9&d=1418384846
Hast du den Code aus #9 denn auch nach der Anweisung
Code:
#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.
