Gedankenquerbeet
Vor 3 Jahren

Mobile Slide Navigation in weniger als einer Minute

Das Symbol mit den drei waagerechten Balken hat sich etabliert. Nutzer wissen intuitiv, dass der Klick auf dieses Symbol eine seitliche Navigationsbar hervorruft. Und tatsächlich hat dieses Symbol auch eine Bezeichnung, es handelt sich nämlich um das Hamburger-Menu-Icon.

Es sind viele Javascript Bibliotheken für mobile Navigationen im Netz verfügbar. Aber mit wenig CSS3 und kaum Javascript (7 Zeilen) ist eine einfache und effektive Navigationsbar sehr schnell realisierbar. In einigen Bibliotheken wird nicht darauf geachtet, die ausklapp Animation der Navigationsbar für mobile Geräte ruckelfrei zu gestalten. In diesem Tutorial werden wir darauf Rücksicht nehmen.

Was wir brauchen

Es wird hier nicht großartig das Aussehen der Navigationsbar berücksichtigt, es geht hauptsächlich um den Kern. Wir brauchen lediglich diese CSS Definitionen:

html {
   height: 100%;
}

body {
    transition: all 0.3s linear;    
    overflow-x: hidden;
    min-height: 100%;
}

.menu {
    background-color: rgb(240, 240, 240);
    position: fixed;
    left: -300px;
    width: 300px;
    height: 100%;
}

 
Dann müssen wir unseren Hamburger Button in unserer Logobar bzw. an die gewünschte Stelle positionieren.

<a href="#" id="hamburger">&#9776;</a>


Jetzt wird natürlich noch die Navigation selbst gebraucht. Diese sollte möglichst am Anfang des body Tags platziert werden.

<nav class="menu" id="menu">
   <section>
      <h1>Navigation</h1>
   </section>
          
   <section>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
   </section>
</nav>


Anschließend kommt nur noch ein kleiner Javascript Teil:

var open = false;

document.getElementById("hamburger").addEventListener("click", function() 
{
   if(!open)
   {
      document.body.style.transform = "translate3d(300px, 0, 0)";
      open = true;
   }
   else
   {
      document.body.style.transform = "translate3d(0, 0, 0)";
      open = false;
   }
});


Und das wars!

Warum translate3d?

Man könnte hier natürlich auch translate benutzen, aber translate3d sorgt dafür, dass der Browser die Animation Hardware beschleunigt berechnet. Dadurch ist dann die Animation unserer Navigationsbar auch auf mobilen Endgeräten flüssig!

Für flüssige Animationen auf mobilen Endgeräten sollte übrigens auch nie mit Javascript sondern immer mit CSS3 animiert werden.

Gesamte Demo

Eine gesamte Demo mit etwas mehr Design: Demo

Natürlich darf auf der Demo Seite der Quelltext gerne eingesehen und kopiert werden.

Kommentar verfassen



CSS3 CSS Animation langsam Animation langsam auf Smartphone Animation ruckelt Animation hängt