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!