So erstellen Sie ein Fly-out-Menü mit CSS

Die Fly-out- oder Dropdown-Menüs zeigen die Seitenhierarchie der Website. Es beseitigt die Notwendigkeit, dass Benutzer mehrere Seiten laden müssen. Das Fly-out-Menü wird verwendet, um das Kontext- oder Drop-Menü anzuzeigen, wenn der Benutzer ihn anfordert. Es wird auch als Untermenü bezeichnet. Diese Menüs werden bei Mausschwebedaten erweitert. Das Fly-out-Menü kann ohne JavaScript erstellt werden.

In diesem Beitrag wird das Verfahren erläutert, um ein Fly-out-Menü mit CSS zu erstellen.

So erstellen Sie ein Fly-out-Menü mit CSS?

Fügen Sie in HTML die folgenden Elemente hinzu, um ein Fly-out-Menü zu erstellen:

• • Der "
    "Element wird mit dem" implementiert "Fliegen-Menu" Klasse. Fügen Sie in diesem Element das hinzu “
    • Element, um die Menüs einzuschließen.
    • Der "
    • Elemente halten die Quell -URL und Namen der Seiten, die als Menüs angezeigt werden.
    • Die URL hat im Attribut definiert “href"Der HTML"" Element:

  
  
  • Heim
  
  
  • Um
    
    
    
    • Fakultät
    
    
    • Mitarbeiter
    
    
    • Management
    
    
    
    
  
  
  • Admissions
    
    
    
    • Kriterien
    
    
    • Probentests
    
    
    
    
  
  
  • Akademiker
  
  
  • Veranstaltungen
    
    
    
    • Preisverteilung
    
    
    • Wettbewerbe
    
    
    • Umwelt tag
    
    
    
    
  
  
  • Kontakt
  
  

  
  Die Struktur des Fly-out-Menüs wurde erfolgreich mit den HTML-Elementen erstellt:

  
  Wenden Sie nun die CSS -Eigenschaften auf das Stil von HTML -Elementen an.

  Schritt 1: Stil „Fly-Menu“ -Klasse

  .Fly-Menu
  Rand: 15px;
  Breite: 150px;
  Schriftfamilie: Verdana, Genf, Tahoma, Sans-Serif;
  

  
  Der "Fliegen-Menu"Klasse der"

  Das Element wird mit diesen Eigenschaften angegeben:
  • • “Rand”Gibt Platz auf jeder Seite des Elements.
    • “Breite”Bestimmt die Breite des Elements.
    • “SchriftfamilieEigenschaft weist den Schriftstil des Elements zu. Die Liste der genannten Schriftarten stellt sicher, dass der andere automatisch der andere angewendet wird, wenn der erste Stil vom Browser nicht unterstützt wird.

  Ausgang

  
  Schritt 2: Stil „Li“ Element

  .Fly-Menu li
  Position: Relativ;
  Bildschirmsperre;
  

  
  Das Kinderelement “

  • " des "
    "Tag mit Klasse"Fliegen-Menu”Wird mit den folgenden Eigenschaften gestaltet:
    • • “Position”Eigenschaft mit dem Wert“relativ”Passt die Position des Elements relativ an.
      • “Anzeige”Eigenschaft mit dem Wert“Block”Nimmt die gesamte Breite ein und startet von einer neuen Linie.

    Schritt 3: Stil „Li“ und „UL“ Elemente

    .Fly-Menu li ul
    Position: absolut;
    Breite: 100%;
    Anzeige: Keine;
    

    
    Der "

    ”Element innerhalb der“
    • "Tag der"Fliegen-MenuDie Klasse wird mit diesen Eigenschaften angewendet:
      • • “Position" mit dem "absolutDer Wert legt die Position des Elements relativ zum positionierten übergeordneten Element fest.
        • Der "Breite" Und "AnzeigeEigenschaften werden oben erklärt.

      Ausgang

      
      Schritt 4: Stil „A“ Element

      .Fly-Menu a
      Bildschirmsperre;
      Breite: 100%;
      Rand: 5px;
      Polsterung: 10px;
      Farbe: Schwarz;
      Grenze: 1PX Solid RGB (245, 244, 244);
      Box-Shadow: 2px 2px CadetBlue;
      Border-Radius: 8px;
      Übergang: alle 0.3s Leichtigkeit;
      Textdekoration: Keine;
      

      
      Der ""Element der Klasse"Fliegen-Menu”Wird die folgenden Eigenschaften zugewiesen:

      • • Der Text innerhalb des “Das Tag ist standardmäßig blau, fügen Sie die "hinzu"FarbeEigentum zur Ernennung der Textfarbe.
        • Der "GrenzeDas Eigentum wird angewendet, um die Elemente in einer Grenze einzuschließen.
        • “Box SchattenIst eine Abkürzungseigenschaft, die den Schatten hinzufügt, der die Werte für horizontalen Versatz, vertikaler Versatz, Unschärfeeffekt und Farbe enthält.
        • Der "GrenzradiusDas Eigentum macht die Ecken des Elements rund.
        • “ÜbergangEigenschaft definiert die Geschwindigkeit der Animation des Elements über einen bestimmten Zeitraum.
        • “TextdekorationEigentum mit dem "keinerDer Wert beseitigt die unterstreichende Textdekoration.

      Ausgang

      
      Fügen wir dem Fly-out-Menü einige Schwebeffekte hinzu.

      Schritt 5: Stil „A“ Element auf „Hover“

      .Fly-Menu a: Hover
      Hintergrundfarbe: #009;
      Farbe: #fff;
      

      
      Der ":schwebenDie Pseudoklasse wird verwendet, um das Styling anzuwenden, wenn die Maus auf dem Element schwebt. Diese Styling -Eigenschaften werden unten erklärt:

      • • “FarbeGeben Sie die Farbe des Textes des Elements an.
        • Der "Hintergrundfarbe”Wird implementiert, um die Hintergrundfarbe zu ändern.

      Ausgang

      
      Schritt 6: Stil „li“ Element auf „Hover“

      .Fly-Menu Li: Hover ul
      Bildschirmsperre;
      Transformation: Translate (175px, -45px);
      

      
      Der "

    • "Element on schweben zeigt sein Kind"
      Elemente mit den folgenden Eigenschaften:
      • • “Anzeige" mit dem "Block"Wert behebt die Anzeige der"
          Element im Block. Es bedeutet, dass das Element die gesamte Breite einnimmt.
          • “verwandelnEigentum mit dem "übersetzen()Der Funktionswert legt den Animationseffekt auf das Element fest. Die Funktion „Translate ()“ enthält zwei Parameter für die “X-Achse" Und "y-Achse" bzw.
          • Auf schwebe, die “
            Das Element wird als Block in "angezeigt"X-Achse" Und "y-AchseRäume.

          Ausgang

          
          Auf diese Weise können wir effizient ein Fly-out-Menü für unsere Anwendung erstellen.

          Abschluss

          Um ein Fly-out-Menü mit CSS zu erstellen, die “

          " Und "
          • ”Elemente von HTML können implementiert werden, um die Fly-out-Struktur zu erstellen. Das CSS “Anzeige" Und "verwandelnEigenschaften zusammen mit vielen anderen nützlichen Eigenschaften werden verwendet, um es zu formulieren oder zu entwerfen. Dieser Beitrag hat ein umfassendes Verfahren zum Erstellen eines Fly-out-Menüs mit CSS bereitgestellt.