Flexibel Fair b &

Tutorial: Eine mobile Navigation in Contao

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

Mobile Navigation in Contao

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 ;).

Bot-Frage

Wir verwenden Cookies. Weiterlesen …