Tutorial: Eine mobile Navigation in Contao

In diesem Tutorial will ich dir zeigen, wie du eine mobile Navigation in Contao gestaltest – ohne Contao-Erweiterung.

Navigationen sind im Responsive Webdesign oft ein Kapitel für sich. Einerseits sollen sie omnipräsent sein, damit sich der Nutzer gut auf der Website zurecht findet. Andererseits sollen sie möglichst platzsparend und trotzdem gut zu bedienen sein.

In diesem Tutorial zeige ich dir eine vereinfachte Form einer mobilen Contao Navigation, die wir bei unserem Contao-Theme einsetzen – ohne dafür eine zusätzliche Contao-Erweiterung zu verwenden. Stattdessen reicht ein wenig HTML, CSS und ein kleines Javascript-Snippet.

Demo ansehen

Unser Beispiel

Angenommen du hast eine relativ einfache Hauptnavigation in Contao gestaltet und möchtest diese nun für Smartphone und Tablet optimieren. Vermutlich hast du sie in der Kopfzeile platziert und der Quellcode dürfte in etwa so aussehen:

<header id="header">
<div class="inside">
  
<!-- indexer::stop -->
<nav class="mod_navigation nav--horizontal block">
  
  <a href="#skipNavigation22" class="invisible">Navigation überspringen</a>

<ul class="level_1" role="menubar">
  <li class="sibling first">
  	<a href="#" class="sibling first" role="menuitem">Link 1</a>
  </li>
  
  <li class="sibling">
  	<a href="#" class="sibling" role="menuitem">Link 2</a>
  </li>
  
  <li class="sibling">
  	<a href="#" class="sibling" role="menuitem">Link 3</a>
  </li>
  
  <li class="sibling last">
  	<a href="#" class="sibling last" role="menuitem">Link 4</a>
  </li>
</ul>

  <a id="skipNavigation22" class="invisible"> </a>

</nav>
<!-- indexer::continue -->

</div>
</header>

Und deine CSS-Anweisungen könnten zum Beispiel so aussehen, wobei .nav--horizontal eine Klasse ist, die du dem Frontend-Modul über das Feld ID/Klasse gegeben hast:

.nav--horizontal ul {
  margin: 0;
  padding: 0;
}
.nav--horizontal li {
  padding: 0;
  list-style-type: none;
  float: left;
}
.nav--horizontal a,
.nav--horizontal span.active,
.nav--horizontal span.trail {
  display: block;
  padding: 1rem;
  margin: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: orange;
}

Schritt 1: Vorbereitung der Hauptnavigation

Damit sich die Anweisungen für die mobile Darstellung nicht mit den Anweisungen der normalen Darstellung vermischen, ergänzt du die Navigation um eine weitere Klasse .nav--mobile. Außerdem legst du ein HTML-Modul für den Button an und fügst ihn im Seitenlayout vor der Hauptnavigation ein. Der HTML-Code für den Button könnte beispielsweise so aussehen:

<div class="nav-toggler">
	<button class="nav-toggler__button">☰ Menü</button>
</div>

Schritt 2: CSS ergänzen

Die neu hinzugefügte Klasse .nav--mobile bekommt nun alle CSS-Anweisungen für die Darstellung auf Smartphone & Tablets, allerdings nur bis zu einer bestimmten Bildschirmbreite. In unserem Beispiel sind es 767 Pixel.

@media screen and (max-width: 767px) {
  .nav--mobile {
    max-height: 0;
    visibility: hidden;
    transition: max-height 0s 3s, background 0.3s;
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    font-size: 1.25rem;
    text-shadow: 0.025rem 0.025rem 2rem rgba(0, 0, 0, 0.7);
  }
  .nav--mobile ul {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .nav--mobile li {
    float: none;
    transition: opacity 0.3s;
    opacity: 0;
  }
  .nav--mobile a,
  .nav--mobile span.active,
  .nav--mobile span.trail {
    padding: 0.5rem;
    margin: 0.5rem;
  }
}

Erläuterung: Die Navigation soll sich über die komplette Website legen, wird aber zunächst durch max-height: 0 und visibility: hidden ausgeblendet. Außerdem wird die Schriftgröße ein wenig angehoben und die Navigation vertikal mittig platziert.

Auf kleineren Bildschirmen sollte die Navigation nun automatisch ausgeblendet werden, wenn die Breite 768 Pixel unterschreitet.

Als Nächstes gestalten wir den Button zum Einblenden/Ausblenden der mobilen Navigation: 

.nav-toggler {
  font-family: sans-serif;
  float: right;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

@media screen and (min-width: 768px) {
  .nav-toggler {
    display: none;
  }
}

.nav-toggler__button {
  background: none;
  border: 2px solid currentColor;
  outline: none;
  color: orange;
  padding: 0.25rem;
}

Schritt 3: Javascript einfügen

Um die mobile Navigation in Contao sichtbar zu machen, verwende ich ein kleines Snippet, dass auf jQuery basiert. Dieses Script macht eigentlich nichts anderes, als der Navigation eine weitere Klasse nav--mobile--active hinzuzufügen.

Am Einfachsten kannst du dieses Script hinzufügen, indem du eine neue Datei j_nav--mobile.html5 im templates-Ordner erstellst, den Code hineinkopierst und das Template zusammen mit jQuery im Seitenlayout aktivierst.

jQuery(function ($) {
  $('.nav-toggler__button').on('click', function(e) {
      e.preventDefault();
      $('.nav--mobile').toggleClass('nav--mobile--active');
  });
});

Schritt 4: aktivierte, mobile Navigation anzeigen

Nun fehlt nur noch die Gestaltung für die mobile Navigation. Tappt der Nutzer auf den Button, bekommt die Navigation die zusätzliche Klasse nav--mobile--active. Mit dieser Klasse können wir die Navigation nun sichtbar machen:

@media screen and (max-width: 767px) {
  .nav--mobile--active {
    max-height: 100%;
    transition: max-height 0s, background 0.3s;
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
  }
  .nav--mobile--active li {
    opacity: 1;
  }
}

Ich hoffe, dir hat das Tutorial gefallen. Bei Fragen oder Problemen kannst du gerne die Kommentarfunktion benutzen.

vollständige Demo ansehen

PS: Wenn du mehr über unser Contao Theme erfahren möchtest, hier bekommst du die wichtigsten Infos und die Möglichkeit, dich für unseren Newsletter anzumelden.

Zurück

Einen Kommentar schreiben

Kommentar von Nina Gerling |

Wie immer finde ich es gut, dass du solche kleinen Tutorials schreibst. Das ist für den "Nachwuchs" sehr hilfreich.

Eine generelle Anmerkung zu diesen Hamburger-Icons: Es ist benutzerfreundlicher, wenn nicht nur das Symbol angezeigt wird, sondern z.B. auch "Menü" oder "Navigation" sichtbar dabei steht.

Falls das partout nicht gewollt ist, wäre es zumindest für Nutzern von Screenreadern hilfreich, wenn man dem <button> noch das WAI ARIA-Attribut aria-label="Navigation" gibt.

Antwort von Dennis

Moin Nina, da hast du recht. Ich habe den Button direkt mal um das Wort „Menü“ ergänzt. Danke!

Kommentar von Martin |

Klasse, gut durchdachtes Tutorial! Genaudas was ich gesucht habe! Die Rubrik "Ressourcen" ist bei mir Abonniert ;).

Kommentar von Manuel |

Finde das Tutorial sehr hilfreich und gut beschrieben... Auch für Anfänger wie mich... Ich schaffe es allerdings nicht ein neues Template anzulegen... Contao-Backend gibt mir jeweils die bestehenden Orginaltemplates vor und ich kann kein eigenes anlegen. Wie kann ich dies bewerkstelligen?
Danke für deine Hilfe.

Antwort von Dennis

Moin Manuel,

wenn du es direkt über Contao machen möchtest, musst du ein wenig „schummeln“. Du gehst in Templates und erstellst dort ein beliebiges Template. Danach kannst du die Datei beliebig umbenennen, in unserem Fall j_nav--mobile.html5

Jetzt bearbeitest du das Template wieder und ersetzt den bisherigen Quellcode durch den im Tutorial angegeben Code, speicherst, und hast danach die gewünschte Datei, die du dann im Seitenlayout einbinden kannst.

Kommentar von Michael |

Hallo,

vielen Dank für das Tutorial.
Leider ist die Navigation nicht für umfangreiche Websites wirklich nutzbar.
Sobald mehr Navigationspunkte dazu kommen werden diese oben und unten (hängt natürlich von der Displaygröße ab) abgeschnitten und sind nicht erreichbar.
Habt ihr eine Lösung dafür?

Gruß Michael

Antwort von Dennis

Moin Michael,

schau dir dazu mal die mobile Navigation für das SOLO-Theme an. Wenn du die Seite Dokumentation mobil aufrufst, siehst du die optimierte Variante des Tutorials.

Kommentar von Stephan |

Hallo, leider bekomme ich eine Fehlermeldung beim aufrufen der Website, wenn ich die JQuery Funktion einbinde:

Could not find template \"j_nav--mobile.html5\" at [...]/vendor/contao/core-bundle/src/Resources/contao/library/Contao/TemplateLoader.php

Antwort von Dennis

Moin Stephan,

prüfe einmal, ob die Template-Datei, die du angelegt und im Seitenlayout ausgewählt hast, im templates Hauptverzeichnis oder in einem Unterordner von templates liegt. Wenn du in den Theme-Einstellungen einen Unterordner angelegt hast, sollte die Datei auch im entsprechenden Ordner liegen.

Kommentar von Stephan |

Daran lag es wohl. vielen dank für die schnelle hilfe. Super tutorial. ich werd gleich mal den newsletter abonieren

Kommentar von Peter P. |

Ich habe das Problem das meine Navigation hinter dem Content liegt. Somit kann ich weder den Menü Button clicken, noch die hinter dem Conent liegenden Menüpunkte. Selbst wenn ich alle anderen CSS-Statements deaktiviere habe ich dieses verhalten.

Antwort von Dennis

Moin Peter,

probier mal, dem übergeordneten Container, in dem sich die Navigation befindet, also zum Beispiel #header, folgende Anweisungen zu geben:

#header {
position: relative;
z-index:1
}

Kommentar von Karsten |

Super Tutorial,

funktioniert für mich auch soweit, nur dass der Button des Burger-Menüs sich bei mir nicht anklicken lässt und das mobile Menü damit auch nicht öffnet.

Woran kann das liegen?

Antwort von Dennis

Moin Karsten,

wirf mal einen Blick in den Web-Inspektor bzw. dort in die Konsole. Bekommst du einen Javascript-Fehler, wenn du den Button klickst? Wenn nicht, hast du die Template-Datei j_nav--mobile.html5 im Seitenlayout ausgewählt?

Wenn du einen Fehler bekommst, sende ihn mir gerne per E-Mail an service@erdmann-freunde.de

Was ist die Summe aus 7 und 2?

Immer auf dem Laufenden bleiben

Für den Newsletter anmelden

Der Newsletter erscheint 1x im Monat