Menüeinblendung durch Seitenrotationsanimation

Es gibt viele verschiedene Ansätze für Menüs auf Websites. Einige Menüs sind persistent, immer sichtbar und zeigen alle Optionen an. Andere Menüs sind standardmäßig versteckt und müssen geöffnet werden, um die Optionen anzuzeigen. Und es gibt noch weitere Ansätze, wie versteckte Menüs ihre Menüpunkte einblenden. Einige fliegen heraus und überlagern den Inhalt, andere schieben den Inhalt weg, und wieder andere machen eine Art Vollbildmodus.

Unabhängig vom Ansatz haben sie alle ihre Vor- und Nachteile, und der richtige hängt von der Situation ab, in der er eingesetzt wird. Ehrlich gesagt, tendiere ich dazu, Fly-out-Menüs im Allgemeinen zu mögen. Nicht in allen Fällen, natürlich. Aber wenn ich nach einem Menü suche, das sparsam mit Platz umgeht und leicht zugänglich ist, sind sie schwer zu schlagen.

Was mir an ihnen nicht gefällt, ist, wie oft sie mit dem Inhalt der Seite kollidieren. Ein Fly-out-Menü verdeckt im besten Fall den Inhalt und entfernt ihn im schlimmsten Fall komplett aus der Benutzeroberfläche.

Ich habe versucht, einen anderen Ansatz zu wählen. Er hat die Persistenz und Verfügbarkeit einer festen Position sowie die platzsparende Eigenschaft eines versteckten Menüs, das herausfliegt, nur ohne den Benutzer vom aktuellen Inhalt der Seite wegzunehmen.

Hier ist, wie ich es gemacht habe.

Der Schalter

Wir bauen ein Menü, das zwei Zustände hat – offen und geschlossen – und zwischen diesen wechselt. Hier kommt der Checkbox Hack ins Spiel. Er ist perfekt, da eine Checkbox zwei gängige interaktive Zustände hat – angehakt und nicht angehakt (es gibt auch den intermediären Zustand) – die verwendet werden können, um diese Zustände auszulösen.

Die Checkbox ist versteckt und wird mit CSS unter dem Menüsymbol platziert, sodass der Benutzer sie nie sieht, obwohl er damit interagiert. Das Ankreuzen der Box (oder, *hüstel*, des Menüsymbols) blendet das Menü ein. Das Abwählen blendet es aus. So einfach ist das. Wir brauchen nicht einmal JavaScript, um die Arbeit zu erledigen!

Natürlich ist der Checkbox Hack nicht der einzige Weg, dies zu tun, und wenn Sie eine Klasse umschalten möchten, um das Menü mit JavaScript zu öffnen und zu schließen, ist das absolut in Ordnung.

Es ist wichtig, dass die Checkbox im Quellcode dem Hauptinhalt vorausgeht, da der `:checked`-Selektor, den wir schließlich schreiben werden, um dies zu ermöglichen, einen Geschwisterselektor verwenden muss. Wenn dies bei Ihnen zu Layout-Bedenken führt, verwenden Sie Grid oder Flexbox für Ihre Layouts, da sie quellreihenfolgeunabhängig sind, so wie ich ihren Vorteil für das Zählen in CSS genutzt habe.

Der Standardstil der Checkbox (vom Browser hinzugefügt) wird mit der `appearance`-CSS-Eigenschaft entfernt, bevor ihr Pseudo-Element mit dem Menüsymbol hinzugefügt wird, damit der Benutzer das Quadrat der Checkbox nicht sieht.

Zuerst die grundlegende Markup

<input type="checkbox"> 
<div id="menu">
  <!--menu options-->
</div>
<div id="page">
  <!--main content-->
</div>

…und das Basis-CSS für den Checkbox Hack und das Menüsymbol

/* Hide checkbox and reset styles */
input[type="checkbox"] {
  appearance: initial; /* removes the square box */
  border: 0; margin: 0; outline: none; /* removes default margin, border and outline */
  width: 30px; height: 30px; /* sets the menu icon dimensions */
  z-index: 1;  /* makes sure it stacks on top */
} 


/* Menu icon */
input::after {
  content: "\2255";
  display: block; 
  font: 25pt/30px "georgia"; 
  text-indent: 10px;
  width: 100%; height: 100%;
} 


/* Page content container */
#page {
  background: url("earbuds.jpg") #ebebeb center/cover;
  width: 100%; height: 100%;
}

Ich habe auch die Stile für den `#page`-Inhalt hinzugefügt, der ein vollformatiges Hintergrundbild sein wird.

Der Übergang

Wenn der Menüschalter angeklickt wird, passieren zwei Dinge. Erstens ändert sich das Menüsymbol in ein ×, was symbolisiert, dass es angeklickt werden kann, um das Menü zu schließen. Wir wählen also das `::after`-Pseudo-Element des Checkbox-Inputs aus, wenn sich der Input in einem `:checked`-Zustand befindet.

input:checked::after {
  content: "\00d7"; /* changes to × mark */
  color: #ebebeb;
}

Zweitens transformiert sich der Hauptinhalt (unser "Kopfhörer"-Bild) und deckt das darunter liegende Menü auf. Er bewegt sich nach rechts, rotiert und skaliert herunter, und seine linken Ecken werden kantig. Dies soll den Eindruck erwecken, dass der Inhalt zurückgeschoben wird, wie eine sich öffnende Tür. 

input:checked ~ #page { 
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  transform: translateX(40%) rotateY(10deg) scale(0.8); 
  transform-origin: right center; 
  transition: all .3s linear;
} 

Ich habe `clip-path` verwendet, um die Ecken des Bildes zu verändern.

Da wir einen Übergang auf die Transformationen anwenden, benötigen wir einen anfänglichen `clip-path`-Wert für `#page`, damit es etwas gibt, von dem übergeblendet werden kann. Wir werden auch einen Übergang auf `#page` legen, während wir schon dabei sind, denn das ermöglicht es, dass es sich genauso reibungslos schließt, wie es sich öffnet.

#page {
  background: url("earbuds.jpeg") #ebebeb center/cover; 
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all .3s linear;
  width: 100%; height: 100%;
}

Mit dem Kern-Design und -Code sind wir im Grunde fertig. Wenn die Checkbox abgewählt wird (durch Anklicken des ×-Symbols), wird die Transformation des Kopfhörerbildes automatisch rückgängig gemacht, und es wird wieder nach vorne und in die Mitte gebracht. 

Eine Prise JavaScript

Auch wenn wir haben, was wir wollen, gibt es noch eine Sache, die die Benutzererfahrung erheblich verbessern würde: Das Menü schließen, wenn auf das `#page`-Element geklickt (oder getippt) wird. Auf diese Weise muss der Benutzer nicht nach dem ×-Symbol suchen oder es verwenden, um zum Inhalt zurückzukehren.

Da dies nur eine zusätzliche Möglichkeit ist, das Menü auszublenden, können wir JavaScript verwenden. Und wenn JavaScript aus irgendeinem Grund deaktiviert ist? Kein großes Problem. Es ist nur eine Verbesserung, die nicht verhindert, dass das Menü ohne sie funktioniert.

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input')) => { 
  if (checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
});

Was diese Dreizeiler macht, ist, einen Klick-Event-Handler über das `#page`-Element zu legen, der die Checkbox abwählt, wenn die Checkbox in einem `:checked`-Zustand ist, was das Menü schließt.

Wir haben uns eine Demo angesehen, die für ein vertikales/porträtiertes Design erstellt wurde, aber genauso gut auch bei größeren Querformat-Bildschirmgrößen funktioniert, je nach dem Inhalt, mit dem wir arbeiten.

---

Dies ist nur ein Ansatz oder eine Variante des typischen Fly-out-Menüs. Animationen eröffnen viele Möglichkeiten und es gibt wahrscheinlich Dutzende anderer Ideen, die Ihnen vielleicht in den Sinn kommen. Tatsächlich würde ich mich freuen, sie zu hören (oder besser noch, zu sehen), also teilen Sie sie bitte mit!