WordPress – Wie blendet man ein Menü auf Mobile Devices aus?

Mobile PhoneIn einem früheren Beitrag habe ich gezeigt, wie man das Menü im Twenty Seventeen Theme optisch etwas verbessert.
Aber man ist ja nie zufrieden. Ich finde es chic, wenn auf Smartphones beim Scrollen das Menü verschwindet und Platz für den Content macht, um dann bei einem Wisch nach oben wieder zu erscheinen. Also wollte ich das auch haben und so geht es:

1. Mit Javascript die Scrollrichtung feststellen

Als Erstes müssen wir feststellen, in welche Richtung die Seite gescrollt wird. Findet der Seitenlauf nach oben statt, soll das Menü ausgeblendet werden. Und wieder eingeblendet, wenn die Seite wieder nach unten gezogen wird. Das folgende Javascript Snippet erzeugt eine CSS-Klasse und bindet diese an den body-Tag. Diese Klasse kann dann in CSS-Regeln als Diskriminator genutzt werden.

jQuery(document).ready(function( $ ) {
  var lastScrollTop = 0;
 
  $(window).scroll(function(event) {
    var st = $(this).scrollTop();
 
    if (st > lastScrollTop) {
      if (!$('body').hasClass('down')) {
        $('body').addClass('down');
      }
    } else {
      $('body').removeClass('down');
    }
 
    lastScrollTop = st;
 
    if ($(this).scrollTop() <= 0) {       $('body').removeClass('down');
    };
  });
});

 

2. Mit CSS-Regeln das Menü beim Scrollen ein- und ausblenden

Im CSS des Twenty Seventeen Themes liegt bei 30em der Breakpoint für Tablets. Die erste Regel lässt das Menü weich ein- und ausblenden und die zweite lässt es bei einem Seitenlauf nach unten verschwinden.

/* Menü ausblenden auf kleinen Devices... */
@media screen and (min-width: 20em) and (max-width: 29.99em) {
  .navigation-top {
    transition: transform .25s .1s ease-in-out;
  }
 
  .down .navigation-top {
    transform: translate3d(0, -80px, 0);
  }
}

 
Das ist es schon gewesen. Wie fast immer, ist die Menge an Code überschaubar. Allerdings dauert es eine Zeit, bis man die Zusammenhänge erkennt und die Lösung für eine Aufgabe offensichtlich wird.

Like
Like Love Haha Wow Sad Angry

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.