Off Canvas Menü mit CSS :target

„Off Canvas“ Muster sind unterschiedliche Ansätze für Layouts, bei denen Inhalte im Web nicht nur in einer vertikalen Spalte angeordnet sind. Zum Beispiel könnte die Navigation versteckt am linken Rand des „Canvas“ (des sichtbaren Browserfensters) positioniert und nach Bedarf eingeblendet werden. Anthony Colangelo hat jPanelMenu entwickelt, um genau das zu tun. Hakim El Hattabs Meny ist schicker, aber in seiner Funktion ähnlich.

Beide verwenden JavaScript. Ich dachte, es wäre lustig, zu versuchen, Anthony's jPanelMenu nur mit CSS nachzubilden. Das ist machbar – mit mehreren Vor- und Nachteilen.

Demo ansehen

Zwei Spalten, eine eingeklappt

Die hier verwendete Layout-Technik ist im Wesentlichen ein Zweispalten-Grid. Standardmäßig ist nur die linke Spalte 0% breit und die rechte Spalte 100% breit. Die linke Spalte ist die Navigation, die wir bei Bedarf einblenden wollen. Mit verstecktem Überlauf ist diese Spalte komplett verborgen.

<!-- I am collapsed by default -->
<nav id="main-navigation" class="navigation">
   <a href="#">Nav Links</a>
   <!-- more -->
</nav>

<!-- I am full width by default -->
<div class="page-wrap">
  <header>
    <a href="#main-navigation">Menu</a>
    <h1>Title</h1>
  </header>

  <!-- content -->
</div>

.navigation {
  
  /* Collapsed */
  width: 0; 

  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
}

.page-wrap {
  width: 100%;
  float: right;
}

Offener Menüzustand mit :target

Beachten Sie, dass dieser Link

<a href="#main-navigation">Menu</a>

Mit der ID von

<nav id="main-navigation" class="navigation">

Das ist ein ganz normaler Hash-Link. Die Seite wird zu diesem Element "springen". Wichtiger für uns ist, dass dieser Selektor übereinstimmt

#main-navigation:target {

}

Wenn dieser Link angeklickt wird, können wir das Menü einblenden, indem wir seine Breite erhöhen. Machen wir es am besten schön schiebend.

.navigation {
  transition: width 0.3s ease;
}
#main-nav:target {
  width: 20%; 
}

Wir könnten es dabei belassen, und das Menü würde den Inhalt überlappen (stellen Sie sicher, dass es einen höheren z-index hat). Das wäre völlig in Ordnung. Aber wir haben Optionen. Wir könnten den Inhalt stattdessen nach rechts schieben. Das ist es, was zum Beispiel Facebook in seiner mobilen App tut, wenn das linke Menü geöffnet wird. Oder wir könnten den Hauptinhalt zusammenschieben und ein 20%/80% Grid erstellen. Das werden wir hier tun.

Aber warten Sie... wie wählen wir die .page-wrap nur in dem spezifischen Zustand aus, wenn das Menü geöffnet ist? Wir können einen benachbarten Geschwisterselektor verwenden!

#main-nav:target + .page-wrap {
  width: 80%;
}

So einfach ist das.

Um das Menü zu schließen, müssen wir nur den Hash-Link in der URL entfernen. Geben Sie im Wesentlichen einen Link wie diesen irgendwo ein

<a href="#">Close Menu</a>

Wenn Sie es wirklich schick machen wollen, könnten Sie verschiedene Links verstecken/anzeigen, die sich an exakt derselben Stelle befinden, um einen "Toggle-Link" zu erstellen.

Vorteile

Alles CSS! Weniger Code insgesamt. Weniger zu ladende Ressourcen. Funktioniert ohne JavaScript. Sanftere Übergänge als JavaScript-Übergänge.

Nachteile

Begrenzte Browserunterstützung. :target ist ab IE9+ (das Ganze schlägt fehl, wenn :target nicht funktioniert). Übergänge sind ab IE 10+. Das Ändern von Klassen oder das Ein-/Ausblenden/Animieren mit JavaScript kann Browserbeschränkungen umgehen. Außerdem haben Sie mehr Freiheit bei der Anordnung des Markup, anstatt gezwungen zu sein, die spezifische Reihenfolge einzuhalten, die hier präsentiert wird. Möglicherweise auch etwas bessere Semantik, da keine separaten Links zum Öffnen und Schließen des Menüs benötigt werden.