HTML und CSS Hamburger Menü in Contao einbinden.
Hallo zusammen,
ich bin noch Contao-Anfänger und versuche mich in das CMS einzuarbeiten.
Ich versuche ein Hamburger Menü zum Laufen zu bekommen, dabei soll nur HTML und CSS genutzt werden.
Lokal funktioniert es (d.h. index.hmtl mit Verweis auf das style.css). Nachfolgend der Code:
HTML-Code:
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css">
<div class="hamburger-menu">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="#">Test</a></li>
<li><a class="menu__item" href="#">Home</a></li>
<li><a class="menu__item" href="#">Über mich</a></li>
<li><a class="menu__item" href="#">Kontakt</a></li>
<li><a class="menu__item" href="#">Angebot</a></li>
</ul>
</div>
Code:
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked ~ .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
top: 0;
transform: rotate(0);
}
#menu__toggle:checked ~ .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
visibility: visible;
left: 0;
}
.menu__btn {
display: flex;
align-items: center;
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
visibility: hidden;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
Allerdings ist mir nicht klar wie ich das in Contao mache, bzw. ob der Weg den ich nutze der so sinnvoll ist.
Mein Vorgehen:
Die Datei "style.css" wurde als Externes Stylesheet unter dem genutzten Layout (nur Hauptzeile) hinzugefügt und "Skripte zusammenführen" aktiviert.
Weiterhin habe ich ein "Frontend Module" mit dem "Eigenem HTML-Code" erstellt und gespeichert. Dieses wurde dann auch im Layout eingefügt.
In der Vorschau erscheinen die drei Striche vom Hamburger Menü, aber leider passiert nichts beim Anklicken.
Folgende Zeilen musste ich aus dem HTML entfernen, da diese sonst angezeigt werden.
HTML-Code:
<!-- Link CSS file -->
<link rel="stylesheet" href="style.css">
Ich denke das ist ok, da ja im Layout auf das style.css verwiesen wird, allerdings weiß ich nicht was ich machen soll.
Die Version: 4.13.4 von Contao wird verwendet.
Bin für jeden Tipp dankbar.
Viele Grüße
Melantzius
Liste der Anhänge anzeigen (Anzahl: 2)
Bitte die index.txt in index.html ändern damit es klappt. Es ist kein vollständiger HTML Code, nur ein Teil damit ich das Menü testen kann.
