Squeezy Stretchy Flexbox Nav

Ich habe kürzlich bei The New Tropic eine interessante Variante der Off-Canvas-Navigation gesehen. Es war nicht so sehr der Off-Canvas-Teil. Es war, wie die Elemente innerhalb der Navigation Platz einnahmen. Sie dehnte sich aus, um den verfügbaren Platz zu nutzen, aber sie schrumpfte nie zu stark. Das sind Konzepte, die Flexbox ziemlich einfach umsetzen lässt! Tauchen wir ein wenig ein.

Hier ist die Navigation, ein Video, das zeigt, was ich meine

Mein Lieblingsteil sind die Untermenüs. Wenn ein Untermenü geöffnet wird, gelten die gleichen Regeln. Wenn etwas gedehnt wurde, schrumpfen die Navigationspunkte in der Höhe, um Platz für das Untermenü zu schaffen. Aber sie schrumpfen nie zu stark. Wenn nicht genügend Platz ist, scrollt das Menü einfach.

Standard Zweistufige Navigations-HTML

Ziemlich einfach mit Emmet zu mocken

<nav class="main-nav">
  <ul class="nav-list">
    <li><a href="">Lorem ipsum.</a></li>
    <li>
      <button class="submenu-toggle-button">+</button>
      <a href="">Explicabo, perspiciatis.</a>
      <ul class="submenu nav-list">
        <li><a href="">Lorem ipsum.</a></li>
        <li><a href="">Culpa, qui!</a></li>
        <li><a href="">Repudiandae, eaque.</a></li>
      </ul>
    </li>
    <li><a href="">Sit, dolor.</a></li>
    <li><a href="">Dicta, possimus?</a></li>
    
    <!-- etc -->

  </ul>
</nav>

Flexbox die Spalte

Stellen wir sicher, dass die Liste so hoch wie das Browserfenster ist, was mit Viewport-Einheiten einfach ist. Dann stellen wir sicher, dass jeder der Listenelemente den Platz ausfüllt

.main-nav > ul {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main-nav > ul > li {
  flex: 1;
}

Wir sind schon fast am Ziel! Das Dehnen funktioniert hervorragend, nur wenn Platz ist, wie wir es wollen

Schnelle Umschaltungen

Wir haben einen <button> eingefügt, um die Untermenüs umzuschalten (man könnte argumentieren, dass wir diese Buttons wahrscheinlich mit JavaScript platzieren sollten, da sie ohne sie nichts tun). Hier ist, wie sie funktionieren könnten. Die Untermenüs sind standardmäßig versteckt

.submenu {
  max-height: 0;
  transition: 0.5s;
  overflow: hidden;
}

Wir können es mit einer Klasse öffnen

.submenu.open {
  max-height: 200px; /* non-ideal magic number */
}

Wir animieren hier auf eine unbekannte Höhe, was schwierig ist. Wir hoffen, bald einen guten Artikel dazu zu haben (es gibt Optionen).

Das Umschalten von Klassen ist einfach genug:

var buttons = document.querySelectorAll('.submenu-toggle-button');

[].forEach.call(buttons, function(button) {
  button.addEventListener('click', function() {
    var submenu = button.parentNode.querySelector('.submenu');
    submenu.classList.toggle('open');
  });
});

Das sorgt dafür, dass sich diese Untermenüs so verhalten, wie wir es wollen

Demo

Sie müssen wahrscheinlich zum Pen springen, um mit dem vertikalen Dehnen zu spielen.

Sieh dir den Pen Squeezy Stretchy Nav von Chris Coyier (@chriscoyier) auf CodePen an.