Slide Navigation in weniger als 5 Minuten

Slide Navigation in weniger als 5 Minuten

Wozu das ganze?

Jeder der mal eine Webseite entwickelt hat und diese für mobile Endgeräte optimiert hat, wird auf ein Problem stoßen: Menüs. Gerade wenn man mehr als nur einen Menüpunkt hat, Kategorien und Benutzerseiten wird es problematisch. Wie bringt man dass alles bei dem geringen Platz, den beispielsweise ein Smartphone bietet, unter?

Hamburger!

Natürlich gibt es für dieses Designproblem eine Lösung, welche vermutlich jeder mal gesehen hat. Den Hamburger:

Naja, wie man bei diesem Symbol darauf gekommen ist, dass es wie ein Hamburger aussieht, ist wohl eine andere Geschichte. Die Person muss ziemlich viel Fantasie gehabt haben, denn eigentlich soll das Symbol die Struktur einer Menüliste darstellen.

Was macht man mit diesem Hamburger?

Essen kann man ihn natürlich nicht, schlechter Witz am Rande. Diesen Hamburger benutzt man anders. Ein Klick auf ihn bewirkt in den meisten Fällen, dass sich seitlich eine Menüleiste zeigt. In der Regel verschiebt diese auch den eigentlichen Inhalt der Webseite außerhalb des Sichtbereichs und wird eher selten einfach über den Inhalt gelegt.

Salat, Tomaten und eine Scheibe Fleisch

Es ist sehr einfach eine mobile Navigation zu realisieren. Alles was wir brauchen ist ein bisschen CSS, HTML und Javascript.

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

Wir setzen einen Animationsübergang bei dem Body Element ein. Damit erhalten wir später eine schöne Animation, sobald das Menü den Seiteninhalt nach rechts schiebt. Anschließend designen wir unser Menü, positionieren es entsprechend der Breite nach links außerhalb des Sichtbereichs und das war schon der CSS Teil.

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

Den Hamburger Button positionieren wir jetzt an eine gewünschte Position. Bei einem Klick darauf wird dieses Menü angezeigt:

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

Und damit das ganze logisch verbunden ist, brauchen wir noch ein ganz kleines bisschen Javascript.

Vielleicht auch interessant
Einen Chat mit AJAX entwickeln - In 15 Minuten (easy)
Einen Chat mit AJAX entwickeln - In 15 Minuten (easy)

Einen einfachen AJAX Chat mit Vanilla Javascript erstellen.

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

Fertig ist das Burgermenü!
Eine Live Demo gibt es hier: Mobile Navigation

Was macht translate3d?

Vielleicht fragt sich der ein oder andere warum hier translate3d zum Einsatz kommt, obwohl wir eigentlich zweidimensional arbeiten. Es geht um Performance. Wer Lust hat kann gerne Testweise translate3d mit translate2d austauschen und sich das Ergebnis angucken. Auf mobilen Endgeräten wird in der Regel die translate2d Version ruckeln und die Animation wird alles andere als flüssig sein. Anders sieht es aus mit translate3d, welche dafür sorgt dass die Animation Hardware beschleunigt ausgeführt wird. (Der Grafikchip wird gezwungen mitzuarbeiten)

Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text
Kommentare
????? ????????? ?????> 7 Mt."You ought to be a part of a contest for one of the finest blogs on the web. I am going to highly recommend this web site!"
Jasonoxync> 8 Mt.<a href="https://youtu.be/IKUZYHz7Rv0">???????? ???????? ??????</a>