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 auch bei unseren Contao-Themes einsetzen – ohne dafür eine zusätzliche Contao-Erweiterung zu verwenden. Stattdessen reicht ein wenig HTML, CSS und ein kleines Javascript-Snippet.

Demo ansehen

Werbung in eigener Sache

Kennst du schon OPTIMIST?

OPTIMIST ist ein kostenloses Contao Theme. Es ist es die ideale Basis für minimalistische Websites.

Mehr erfahren

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.

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;
  }
}

vollständige Demo ansehen

Weitere Beispiele findest du auch in unseren Contao Themes. Hier gehen wir sogar noch ein paar Schritte weiter und animieren z.B. das Hamburger-Menü-Icon oder das Einblenden der Menüpunkte.