HTML und CSS Hamburger Menü in Contao einbinden.

[melantzius]

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:

<!-- 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>

#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.

<!-- 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

[dazzle89]

Gibt es eventuell einen Link zur Seite?

[melantzius]

Leider nicht, da ich erstmal lokal den Webserver betreibe.

[Franko]

In der Vorschau erscheinen die drei Striche vom Hamburger Menü, aber leider passiert nichts beim Anklicken.

Naja, für einen Klick Event benötigst du Javascript.

Eine Alternative, ohne JS, wird hier schön beschrieben:
https://www.youtube.com/watch?v=8QKOaTYvYUA

[melantzius]

Vielen Dank für die Rückmeldung, aber ich verstehe nicht warum ich Javascript als Klick Event benötige, wenn es lokal ohne JS geht.
Liegt das an Contao? Ist mein Vorgehen denn überhaupt der richtige Weg?
Hab mir das Hamburg Menü von hier gezogen: https://codepen.io/andreykrokhin/pen/mGEqja

[planepix]

Such mal nach „Pure CSS menu”, da gibt es viele Seiten mit Beispielen.

Ein Beispiel auf deutsch hab ich hier gefunden:
https://www.mediaevent.de/tutorial/c....html#nav_menu

[Franko]

Vielen Dank für die Rückmeldung, aber ich verstehe nicht warum ich Javascript als Klick Event benötige, wenn es lokal ohne JS geht.
Liegt das an Contao? Ist mein Vorgehen denn überhaupt der richtige Weg?
Hab mir das Hamburg Menü von hier gezogen: https://codepen.io/andreykrokhin/pen/mGEqja

Sorry, hatte überlesen das du bereits ein formular feld benutzt.

[mlweb]

Leider nicht, da ich erstmal lokal den Webserver betreibe.

Ohne Link ist es mühselig den Fehler zu suchen.

[tab]

Ist das denn das ganze HTML in deiner lokalen index.html?

[melantzius]

Mein Problem ist nicht das CSS oder die Funktionalität vom Hamburger Menü.
Es funktioniert lokal ohne Contao. Das Problem macht leider Contao bzw. die Konfiguration von CSS und HTML.

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.
Soweit so gut, aber irgendwie greift das CSS nicht richtig.

Sind diese Schritte überhaupt so richtig?

[melantzius]

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.

[tab]

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.

Dass es kein vollständiger HTML-Code ist, ist ja mein Problem. Contao baut dir da alles mögliche dazu und drum herum. Deswegen würde ich ja gern vergleichen, was Du als komplettes index.html benutzt und was Contao aus deinem Schnipsel macht. Vielleicht baue ich es heute abend mal nach, dann sehe ich wenigstens wie es scheitert, wenn auch immer noch nicht wie und warum es ohne Contao funktioniert. Du solltest jedenfalls mal versuchen, das von Contao per Default eingebundene CSS im Seitenlayout zu deaktivieren, so dass wirklich nur noch dein CSS benutzt wird. Dann sieht man wenigstens schon mal, ob es am CSS oder am HTML scheitert.