Hi,
ich habe mal versucht von meiner Seite, auf der ich das einsetze, die relevanten Teile aus dem CSS rauszusuchen. Bin aber gerade unterwegs und mir nicht 100%ig sicher, ob das alles war. Aber vielleicht reicht es als Einstieg. Du musst nur schauen. Vermutlich wird die ID #main-navigation bei dir so nicht passen. Farben vermutlich auch nicht, aber das sollte kein Problem sein, das entsprechend anzupassen.
Code:
#main-navigation > ul > li:hover > ul, #main-navigation > ul > li:hover > div.mega-dropdown {
max-height: 9999px;
opacity: 1;
padding: 0.875em 1em;
pointer-events: auto;
-moz-transition: all 0.2s ease 0s;
-o-transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease;
-webkit-transition-delay: 0s;
transition: all 0.2s ease 0s;
z-index: 1;
}
#main-navigation > ul > li:hover > div.mega-dropdown {
position: absolute;
right: -20px;
color: white;
}
.mega-dropdown {
backface-visibility: hidden;
background: rgba(0, 0, 0, 0.9);
display: block;
font-size: 0.875em;
right: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
transition: max-height 0s ease 0.3s, padding 0s ease 0.3s, opacity 0.3s ease 0s;
width: 100%;
text-transform: none;
}
.mega-dropdown h1, .mega-dropdown h2, .mega-dropdown h3, .mega-dropdown h4, .mega-dropdown h5, .mega-dropdown h6, .mega-dropdown h7 {
text-transform: none;
color: #ffbe1f;
font-size: 1em;
}
.mega-dropdown .image_container {
background: none;
border: none;
}
.mega-dropdown a:hover {
color: #ffbe1f !important;
}
Megamenu für Contao 5
Zitieren
. Anpassungen von vorhandenem CSS können nach meiner Erfahrung aufwendiger sein als komplett eigenes CSS.
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Zitat von dazzle89
Lesezeichen