Hvordan lage en fly-out-meny med CSS

Flu-out eller rullegardinmenyer viser nettstedets sidehierarki. Det utrydder behovet for at brukere laster inn flere sider. Fly-out-menyen brukes til å vise kontekst- eller slippmenyen når brukeren ber om den. Det omtales også som en undermeny. Disse menyene utvides på mushvervet. Fly-out-menyen kan bygges uten å bruke JavaScript.

Dette innlegget vil forklare prosedyren for å opprette en fly-out-meny med CSS.

Hvordan lage en fly-out-meny med CSS?

I HTML, legg til følgende elementer for å lage en flu-out-meny:

• • “
    ”Element implementeres med“Fly-meny”Klasse. Innenfor dette elementet, legg til "
    • ”Element for å inkludere menyene.
    • “
    • ”Elementer holder kilde -url og navn på sidene som viser som menyer.
    • URLen har definert i attributtet “href”Av HTML””Element:

  
  
  • Hjem
  
  
  • Om
    
    
    
    • Fakultet
    
    
    • Personale
    
    
    • Ledelse
    
    
    
    
  
  
  • Opptak
    
    
    
    • Kriterier
    
    
    • Prøvetester
    
    
    
    
  
  
  • Akademikere
  
  
  • arrangementer
    
    
    
    • Premiefordeling
    
    
    • Konkurranser
    
    
    • Miljødag
    
    
    
    
  
  
  • Kontakt
  
  

  
  Strukturen til fly-out-menyen er blitt opprettet med hell ved hjelp av HTML-elementene:

  
  Bruk nå CSS -egenskapene på å style HTML -elementer.

  Trinn 1: Stil "Fly-menu" -klasse

  .Fly-menu
  Margin: 15px;
  Bredde: 150px;
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  

  
  “Fly-meny”Klasse av“

  ”Element er spesifisert med disse egenskapene:
  • • “margin”Gir plass på alle sider av elementet.
    • “bredde”Bestemmer elementets bredde.
    • “Font-familie”Eiendom tildeler elementets fontstil. Listen over nevnte skrifter sikrer at hvis den første stilen ikke støttes av nettleseren, vil den andre bli brukt automatisk.

  Produksjon

  
  Trinn 2: Stil “Li” -element

  .Fly-menu Li
  Posisjon: relativ;
  Display: Block;
  

  
  Barneelementet “

  • " av "
    ”Tag som har klasse”Fly-meny”Er stylet med følgende egenskaper:
    • • “posisjon”Eiendom med verdien”slektning”Justerer elementets posisjons slektning.
      • “vise”Eiendom med verdien”blokkere”Tar opp hele bredden og starter fra en ny linje.

    Trinn 3: Stil “Li” og “UL” elementer

    .Fly-menu Li ul
    Posisjon: Absolutt;
    Bredde: 100%;
    Display: Ingen;
    

    
    “

    ”Element i“
    • ”Tag av“Fly-meny”Klasse brukes med disse egenskapene:
      • • “posisjon" med "Absolutt”Verdien angir elementets posisjon i forhold til det plasserte overordnede elementet.
        • “bredde”Og“vise”Egenskaper er forklart ovenfor.

      Produksjon

      
      Trinn 4: Stil “et” element

      .Fly-menu a
      Display: Block;
      Bredde: 100%;
      Margin: 5px;
      polstring: 10px;
      farge svart;
      Grense: 1px fast RGB (245, 244, 244);
      Bokseskygge: 2px 2px CadetBlue;
      Border-Radius: 8px;
      Overgang: alle 0.3s letthet;
      Tekstdekorasjon: Ingen;
      

      
      “”Element i klassen“Fly-meny”Tildeles følgende egenskaper:

      • • Teksten i "”Tag er som standard blå, legg til“farge”Eiendom for å utnevne tekstfargen.
        • “grense”Eiendom brukes for å omslutte elementene i en grense.
        • “Bokseskygge”Er en korthåndsegenskap for å legge til skygge, som inneholder verdiene for horisontalt forskyvning, vertikal forskyvning, uskarphetseffekt og farge.
        • “Border-Radius”Eiendom gjør elementets hjørner rundt.
        • “overgang”Eiendom definerer hastigheten på elementets animasjon over en gitt periode.
        • “tekstdekorasjon”Eiendom med“ingen”Verdien fjerner understreket tekstdekorasjon.

      Produksjon

      
      La oss legge til noen sveveeffekter på fly-out-menyen.

      Trinn 5: Stil “A” element på “Hover”

      .Fly-menu A: Hopp
      Bakgrunnsfarge: #009;
      Farge: #FFF;
      

      
      “:sveve”Pseudoklasse brukes til å påføre stylingen når musen svever på elementet. Disse stylingegenskapene er forklart nedenfor:

      • • “farge”Oppgi fargen på elementets tekst.
        • “bakgrunnsfarge”Implementeres for å endre bakgrunnsfargen.

      Produksjon

      
      Trinn 6: Stil “Li” -element på “Hover”

      .Fly-menu Li: Hover UL
      Display: Block;
      Transform: Oversett (175px, -45px);
      

      
      “

    • ”Element på svevet vil vise barnet sitt”
      ”Elementer med følgende egenskaper:
      • • “vise" med "blokkere”Verdi fikser visningen av“
          ”Element i blokken. Det betyr at elementet vil ta opp hele bredden.
          • “forvandle”Eiendom med“oversette()”Funksjonsverdi etablerer animasjonseffekten på elementet. "Translate ()" -funksjonen inneholder to parametere for "X-aksen”Og“y-aksenHenholdsvis.
          • På svevet, "
            ”Element vil vises som en blokk i“X-aksen”Og“y-aksen”Mellomrom.

          Produksjon

          
          På denne måten kan vi effektivt lage en fly-out-meny for applikasjonen vår.

          Konklusjon

          For å opprette en fly-out-meny med CSS, “

          ”Og“
          • ”Elementer av HTML kan implementeres for å lage flu-out-strukturen. CSS “vise”Og“forvandle”Egenskaper sammen med mange andre nyttige egenskaper brukes til å formulere eller designe den. Dette innlegget har gitt en omfattende prosedyre for å lage en flu-out-meny ved hjelp av CSS.