Illustration – jQuery.mmenu wird mit gesamter Seite in Widescreen zentriert

jQuery.mmenu: Responsive Website mit Off-canvas Navigation im Fenster zentrieren

jQuery.mmenu bietet mit der widescreen-Extension die Möglichkeit, die Navigation ab einer gewissen Breite immer anzuzeigen. Wie man diese dann gemeinsam mit der Website im Browserfenster zentriert, zeige ich hier.

Demo

Was ist jQuery.mmenu?

jQuery.mmenu ist ein jQuery-Plugin für Navigationen mit vielen Konfigurationsmöglichkeiten; eine maßgebliche Funktion ist die Ausgabe von Untermenüs über einen Slide-Effekt. Per default wird das Menü außerhalb des Viewports positioniert, als sogenannte Off-canvas-Navigation: Das Menü wird über einen Button eingeblendet und verschiebt dabei den Inhaltsbereich. Bekannt wurde diese Technik über die Facebook-App.

Wie funktioniert jQuery.mmenu?

jQuery.mmenu setzt jQuery voraus (ach was!). Das mitgelieferte jQuery.mmenu-JavaScript ergänzt selbst die benötigten CSS-Klassen und ist auch dafür verantwortlich, die Navigation im DOM direkt unterhalb von <body> zu verschieben – ganz gleich, wo wir sie in den Quelltext geschrieben haben. 

Das Plugin bietet eine API, über die wir die gewünschten Add-ons und Extensions einrichten können. Ich kann hier nicht auf alles eingehen, die offizielle Dokumentation ist aber gut gepflegt. Grundsätzlich werden Optionen und Konfigurationen über zwei Codeblöcke eingerichtet. Dies ist ein umfangreicheres Beispiel:

$(document).ready(function() {
  $('#menu').mmenu({
    // options
    extensions: [ 'effect-slide-menu', 'pageshadow' ],
    searchfield: true,
    counters: true,
    navbar: {
      title: 'Advanced menu'
    },
    navbars: [
      {
        position: 'top',
        content: [ 'searchfield' ]
      }, {
        position: 'top',
        content: [
          'prev',
          'title',
          'close'
        ]
      }
    ]
  }, {
    // configuration
    clone: true,
    classNames: {
      selected: 'active',
      vertical: 'Vertical'
    }
  });
});

Das Tutorial: Zentrierung der Website inkl. Navigation

Zuerst laden wir das jQuery.mmenu Plugin von der offiziellen Website herunter. Im ZIP enthalten ist ein "demo"-Ordner mit einer default.html. Diese können wir für unsere Zwecke verwenden, du kannst aber auch dein eigenes Template entsprechend anpassen.

Neben dem Template benötigen wir folgende Dateien, die im <head> verknüpft werden müssen:

  • /demo/css/demo.css
  • /dist/css/jquery.mmenu.all.css
  • /dist/extensions/widescreen/ jquery.mmenu.widescreen.css
    (über Media Query ab gewünschter Breite eingebunden!)
  • eine jQuery-Version ab 1.7.2
  • /dist/js/jquery.mmenu.all.min.js

HTML-Struktur

Wie eingangs erklärt, verschiebt das jquery.mmenu.all.min.js die Navigation im DOM unterhalb von <body>. Dies werden wir gleich ändern, vorher ordnen wir unsere HTML-Struktur wie folgt an: Die gesamte Seite erhält einen Wrapper, der die beiden Bereiche Menü und Seiteninhalt umfasst. Der Einfachheit halber gehen wir davon aus, dass die Navigation links steht. Es wären aber auch andere Layouts möglich.

<div class="wrapper">
  <nav id="menu">
    <ul>
      <li><a href="#">page</a></li>
      <li><a href="#">page</a>
        <ul>
          <li><a href="#">page</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="page">
    <div class="header">
      <a class="toggle-icon" href="#menu"></a>
    </div>
    <div class="content">
    </div>
  </div>
</div>

JavaScript

Nun konfigurieren wir unsere Navigation. Dies ist ein einfaches Beispiel, das auf Wunsch natürlich um weitere Funktionen von jQuery.mmenu ergänzt werden kann. Im Bereich offCanvas: {} verändern wir zwei Default-Werte:

  • menuWrapperSelector: Das Element im DOM, welches das Menü beinhalten soll
  • pageSelector: Das Element im DOM, was dem Plugin als "Seite" gilt
<script type="text/javascript">
  $(document).ready(function() {
    $('#menu').mmenu({
      // options
      extensions: [ 'effect-slide-menu', 'pageshadow', 'widescreen' ]
    }, {
      // configuration
      offCanvas: {
        menuWrapperSelector: '.wrapper',
        pageSelector: '.page'
      }
    });
   });
</script>

Dadurch verschiebt bzw. belässt das Plugin das Menü an der richtigen Stelle im DOM und weiß, dass .page der Bereich ist, der beim Einblenden des Menüs verschoben wird.

CSS

Zu guter Letzt weisen wir noch ein paar einfache CSS-Deklarationen zu:

  • der Wrapper erhält eine Maximalbreite und wird zentriert
  • die Seite erhält eine Minimalhöhe von 100vh, damit der Hintergrund unabhängig vom Inhalt der Seite bis nach unten verläuft
  • html.mm-background .mm-page ist eine Deklaration des Plugins, die wir mit der Hintergrundfarbe der Seite überschreiben
  • über einen Media Query verändern wir im Widescreen-Format die Position des Menüs und blenden den dann überflüssigen Menü-Button aus
body {
  background-color: #444;
}
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.page {
  background-color: #fff;
  height: 100vh;
}
html.mm-background .mm-page {
  /* default is 'inherit' */
  background-color: #fff;
}
@media (min-width: 900px) {
  #menu {
    position: absolute;
  }
  .header .toggle-icon {
    /* don't show menu icon in widescreen */
    display: none;
  }
}

Nun sollte der gewünschte Effekt eintreten. Von hier an kann die Navigation noch um weitere Funktionen ergänzt werden.

Fehlersuche

Warum wird meine Navigation immer angezeigt, auch in schmalen Viewports?

Wahrscheinlich hast du die CSS-Datei für widescreen nicht mit einem Media Query eingebunden, der das Verhalten auf eine bestimmte Fensterbreite beschränkt. Versuche es mit:

<link type="text/css" rel="stylesheet" href="Css/jquery.mmenu.widescreen.css" media="all and (min-width: 900px)">

oder lade die jquery.mmenu.widescreen.scss über einen Media Query in deinem Sass-Dokument.

Ich habe meine JavaScript-Konfiguration um offCanvas: {} ergänzt. Warum wird das Menü jetzt gar nicht mehr angezeigt?

Die API ist zweigeteilt: Zuerst kommen die Optionen, dann die Konfigurationen. Prüfe zuerst, ob du die Ergänzungen korrekt im zweiten Teil gesetzt hast. Möglicherweise hast du auch Klammern falsch geschlossen – vergleiche deine Einstellungen mit dem Quellcode in der Demo.

Einen gebrauchsfertigen Fallback bei deaktiviertem JavaScript liefert das Plugin jQuery.mmenu übrigens nicht. Diesen muss man selbst einrichten, ist bei der Wahl des Fallbacks dann aber flexibel.

Zurück