Menü enthüllen nach Seite Drehen Animation

Die Website -Menü -Designmethoden sind vielfältig. Einige Menüs sind immer sichtbar und alle Optionen werden direkt angezeigt. Andere sind versteckt und müssen geklickt werden, um zu erweitern. Die Art und Weise, wie die versteckten Menüs erweitert werden, ist anders: Einige rutschen und abdecken Inhalte, einige schieben den Inhalt weg und einige verwenden Vollbildanzeige.

Jede Methode hat ihre Vor- und Nachteile, und die beste Wahl hängt vom spezifischen Anwendungsszenario ab. Ich persönlich bevorzuge das Ausrutschenmenü, und sicherlich gelten nicht alle Situationen. Wenn jedoch ein platzsparendes und leicht zugängliches Menü benötigt wird, ist das Ausrutschenmenü schwer zu übertreffen.

Ausrutschenmenüs in Konflikt jedoch häufig mit Seiteninhalten. Es wird zumindest den Inhalt blockieren und im schlimmsten Fall den Inhalt vollständig aus der Benutzeroberfläche entfernt.

Ich habe einen anderen Ansatz ausprobiert, der die Haltbarkeit und Verwendbarkeit eines festen Standortmenüs sowie das platzsparende versteckte Ausrutschenmenü kombiniert, ohne den Benutzer aus dem aktuellen Inhalt zu entfernen.

Hier ist meine Implementierungsmethode.

Schalterschalter

Wir bauen ein Menü mit zwei Zuständen (Ein und Schließen) und wechseln zwischen den beiden. Hier kommt der Checkbox -Trick ins Spiel. Es ist perfekt, da das Kontrollkästchen zwei gemeinsame interaktive Zustände enthält - überprüft und deaktiviert (und unsicheren Zuständen), mit denen diese Zustände ausgelöst werden können.

Das Kontrollkästchen ist im Menüsymbol versteckt und mit CSS positioniert, sodass es nicht ersichtlich ist, wenn der Benutzer mit ihm interagiert. Durch Auswahl des Kontrollkästchens (oder, ähm , Menüsymbol) wird das Menü angezeigt. Deaktivieren Sie es. Es ist so einfach. Wir brauchen nicht einmal JavaScript, um den Job zu erledigen!

Natürlich sind Kontrollkästchen -Tricks nicht der einzige Weg, und wenn Sie den Unterricht mit JavaScript wechseln möchten, um Menüs zu öffnen und zu schließen, ist das völlig in Ordnung.

Wichtig ist, dass das Kontrollkästchen dem Hauptinhalt im Quellcode voraus sein sollte, da wir schließlich den :checked Selektor schreiben werden, für den der Geschwisterauswahl ausgewählt wird. Wenn dies Layoutprobleme verursacht, verwenden Sie Grid oder Flexbox für Layouts, da sie nichts mit Quellcode -Reihenfolge zu tun haben, z. B. wie ich seine Vorteile für die CSS -Zählung nutzen kann.

Verwenden Sie appearance -CSS-Eigenschaft, um den Standardstil des Kontrollkästchens (vom Browser hinzugefügt) zu entfernen, und fügen Sie dann ein Pseudo-Element mit einem Menüsymbol hinzu, damit der Benutzer die Kontrollkästchen-Blöcke nicht sehen kann.

Erstens die Basis -Tags:

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

Und grundlegende CSS für Kontrollkästchen Tricks und Menüsymbole:

 /* Verstecken Sie das Kontrollkästchen und setzen Sie den Stil zurück*/
input [type = "checkbox"] {
  Aussehen: Initial; /* Box löschen*/
  Grenze: 0; Rand: 0; Umriss: Keine; /* Entfernen Sie Standardmargen, Grenzen und Umrisse*/
  Breite: 30px; Höhe: 30px; /* Menüsymbolgröße einstellen*//*
  Z-Index: 1; /* Stellen Sie sicher, dass es oben ist*/
}

/* Menüsymbol*//
input :: nach {
  Inhalt: "\ 2255";
  Anzeige: Block;
  Schriftart: 25pt/30px "Georgia";
  textindent: 10px;
  Breite: 100%; Höhe: 100%;
}

/* Page Inhalt Container*///
#Seite {
  Hintergrund: URL ("Earbuds.jpg") #ebebeb Center/Cover;
  Breite: 100%; Höhe: 100%;
}

Ich habe auch den Stil von #page -Inhalten hinzugefügt, der ein Hintergrundbild in voller Größe ist.

Übergangseffekt

Es passieren zwei Dinge, wenn Sie auf eine Menüsteuerung klicken. Zunächst wird das Menüsymbol in die "×" -Marke geändert, die angibt, dass Sie darauf klicken können, um das Menü zu schließen. Wenn sich die Eingabe in dem :checked Status befindet, wählen wir also das in das Kontrollkästchen ::after Pseudo-Element aus:

 Eingabe: Checked :: After {
  Inhalt: "\ 00D7"; /* Wechseln Sie zu "×" Tag*/
  Farbe: #ebebeb;
}

Zweitens wird der Hauptinhalt (unser "Kopfhörer" -Abbild) konvertiert, um das folgende Menü anzuzeigen. Es bewegt sich nach rechts, dreht sich und schrumpft und die linke Ecke wird zum Winkel. Dies soll den Inhalt so aussehen, als würde er wie eine offene Tür zurückgedrückt werden.

 Eingabe: geprüft ~ #page {
  Clip-Pfad: Polygon (0 8%, 100%0, 100%100%, 0 92%);
  Transformation: Translatex (40%) Drehung (10DEG) Skala (0,8);
  Transform-Origin: Right Center;
  Übergang: alle .3s linear;
}

Ich verwende clip-path um den Bildwinkel zu ändern.

Da wir Übergänge zur Transformation anwenden, erfordert #page einen anfänglichen clip-path -Wert, damit der Übergang etwas vornimmt. Wir werden auch einen Übergang auf #page hinzufügen, da er es ermöglicht, reibungslos zu schließen, wenn er sich öffnet.

 #Seite {
  Hintergrund: URL ("Earbuds.jpeg") #ebebeb Center/Cover;
  Clip-Pfad: Polygon (0 0, 100% 0, 100% 100%, 0 100%);
  Übergang: alle .3s linear;
  Breite: 100%; Höhe: 100%;
}

Wir haben im Grunde das Kerndesign und Code abgeschlossen. Wenn das Kontrollkästchen nicht überprüft ist (indem Sie auf die Marke "×" klicken), wird die Konvertierung im Headset -Bild automatisch rückgängig gemacht und in die Mitte -Position zurückgeführt.

Ein kleines JavaScript

Auch wenn wir bereits das haben, was wir wollen, gibt es noch eine Sache, um die Benutzererfahrung zu verbessern: Schließen Sie das Menü beim Klicken (oder klicken) #page -Element. Auf diese Weise kann der Benutzer den Inhalt zurückgeben, ohne das "×" -Tag zu suchen oder sogar zu verwenden.

Da dies nur eine weitere Möglichkeit ist, das Menü zu verbergen, können wir JavaScript verwenden. Was ist, wenn JavaScript aus irgendeinem Grund deaktiviert ist? Es spielt keine Rolle. Es ist nur eine Verbesserung, die das Menü nicht daran hindert, ohne es zu arbeiten.

 Document.querySelector ("#Seite"). AddEventListener ('Click', (E, CheckBox = Document.querySelector ('Eingabe')) => {
  if (CheckBox.Conted) {CheckBox.Conted = false; E.Stoppropagation (); }
});

Der Zweck dieser drei Codezeilen besteht darin, #page einen Klick -Ereignis -Handler hinzuzufügen. Wenn sich das Kontrollkästchen im :checked Status befindet, deaktivieren Sie das Kontrollkästchen, um das Menü zu schließen.

Wir haben uns die Demos angesehen, die für vertikale/vertikale Designs hergestellt wurden, aber es funktioniert auf großen Bildschirmgrößen genauso gut, je nachdem, was wir verwenden.

Dies ist nur ein Weg oder versuchen Sie es mit einem typischen Ausrutschenmenü. Animation eröffnet viele Möglichkeiten, und Sie haben möglicherweise auch Dutzende anderer Ideen. Tatsächlich würde ich sie gerne hören (oder besser noch sehen), also bitte teilen!

Das obige ist der detaillierte Inhalt vonMenü enthüllen nach Seite Drehen Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!