Come creare un menu di fly-out con CSS

I menu a fly-out o a discesa mostrano la gerarchia della pagina del sito web. Seradica la necessità per gli utenti di caricare più pagine. Il menu Fly-out viene utilizzato per visualizzare il menu contesto o drop quando l'utente lo richiede. Viene anche definito sottomenu. Questi menu sono ampliati sul mouse del topo. Il menu Fly-out può essere creato senza usare JavaScript.

Questo post spiegherà la procedura per creare un menu di volo con CSS.

Come creare un menu di fly-out con CSS?

In HTML, aggiungi i seguenti elementi per creare un menu Fly-out:

• • IL "
    "L'elemento è implementato con il"fly-menu" classe. All'interno di questo elemento, aggiungi il "
    • "Elemento per includere i menu.
    • IL "
    • "Gli elementi contengono l'URL di origine e i nomi delle pagine che mostrano come menu.
    • L'URL ha definito nell'attributo "Href"Dell'HTML""Elemento:

  
  
  • Casa
  
  
  • Di
    
    
    
    • Facoltà
    
    
    • Personale
    
    
    • Gestione
    
    
    
    
  
  
  • Ammissioni
    
    
    
    • Criteri
    
    
    • Test di esempio
    
    
    
    
  
  
  • Accademici
  
  
  • Eventi
    
    
    
    • Distribuzione dei premi
    
    
    • Competizioni
    
    
    • Giorno dell'ambiente
    
    
    
    
  
  
  • Contatto
  
  

  
  La struttura del menu Fly-out è stata creata correttamente utilizzando gli elementi HTML:

  
  Ora, applica le proprietà CSS sugli elementi HTML in stile.

  Passaggio 1: classe "fly-menu"

  .fly-menu
  Margine: 15px;
  larghezza: 150px;
  Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;
  

  
  IL "fly-menu"Classe della"

  "L'elemento è specificato con queste proprietà:
  • • "margine"Dà spazio su ogni lato dell'elemento.
    • "larghezza"Determina la larghezza dell'elemento.
    • "famiglia di font"La proprietà assegna lo stile del carattere dell'elemento. L'elenco dei caratteri menzionati garantisce che se il primo stile non è supportato dal browser, l'altro verrà applicato automaticamente.

  Produzione

  
  Passaggio 2: elemento "li" di stile

  .fly-menu li
  Posizione: relativo;
  blocco di visualizzazione;
  

  
  L'elemento bambino "

  • "Del"
    ”Tag con classe"fly-menu"È disegnato con le seguenti proprietà:
    • • "posizione"Proprietà con il valore"parente"Regola la posizione dell'elemento relativa.
      • "Schermo"Proprietà con il valore"bloccare"Prende l'intera larghezza e inizia da una nuova linea.

    Passaggio 3: elementi di stile "Li" e "UL"

    .fly-menu li ul
    Posizione: assoluto;
    larghezza: 100%;
    visualizzazione: nessuno;
    

    
    IL "

    "Elemento all'interno del"
    • Tag del "fly-menu"La classe viene applicata con queste proprietà:
      • • "posizione" con il "assoluto"Il valore imposta la posizione dell'elemento rispetto all'elemento genitore posizionato.
        • IL "larghezza" E "Schermo"Le proprietà sono spiegate sopra.

      Produzione

      
      Passaggio 4: elemento stile “A”

      .fly-menu a
      blocco di visualizzazione;
      larghezza: 100%;
      Margine: 5px;
      imbottitura: 10px;
      colore nero;
      bordo: 1px solido RGB (245, 244, 244);
      Box-Shadow: 2px 2px CadetBlue;
      raggio di frontiera: 8px;
      Transizione: tutti 0.3s facilità;
      DECORAZIONE DEL TESTO: Nessuno;
      

      
      IL ""Elemento della classe"fly-menu"Sono assegnate le seguenti proprietà:

      • • Il testo all'interno del ""Il tag è per impostazione predefinita blu, aggiungi il"colore"Proprietà per nominare il colore del testo.
        • IL "confine"La proprietà viene applicata per racchiudere gli elementi in un confine.
        • "Box-Shadow"È una proprietà stentata per aggiungere ombra, che contiene i valori per offset orizzontale, offset verticale, effetto sfocatura e colore.
        • IL "raggio di confine"La proprietà rende gli angoli dell'elemento.
        • "transizione"La proprietà definisce la velocità dell'animazione dell'elemento per un determinato periodo di tempo.
        • "decorazione del testo"Proprietà con il"nessuno"Il valore rimuove la decorazione del testo sottolinea.

      Produzione

      
      Aggiungiamo alcuni effetti di mouse al menu Fly-out.

      Passaggio 5: Stile "A" Elemento su "Hover"

      .fly-menu a: hover
      Background-color: #009;
      Colore: #FFF;
      

      
      IL ": Hover"La classe pseudo viene utilizzata per applicare lo stile quando il mouse si libra sull'elemento. Queste proprietà di stile sono spiegate di seguito:

      • • "colore"Indica il colore del testo dell'elemento.
        • IL "colore di sfondo"È implementato per modificare il colore di sfondo.

      Produzione

      
      Passaggio 6: stile "Li" elemento su "Hover"

      .fly-menu li: hover ul
      blocco di visualizzazione;
      trasformazione: traduzione (175px, -45px);
      

      
      IL "

    • "Element on Hover mostrerà il suo figlio"
      "Elementi con le seguenti proprietà:
      • • "Schermo" con il "bloccare"Valore corregge il display di"
          "Elemento nel blocco. Significa che l'elemento occuperà l'intera larghezza.
          • "trasformare"Proprietà con il"tradurre()"Il valore della funzione stabilisce l'effetto di animazione sull'elemento. La funzione "Translate ()" contiene due parametri per "Asse X" E "asse y"Rispettivamente.
          • Su Hover, il "
            "L'elemento verrà visualizzato come blocco in"Asse X" E "asse y"Spazi.

          Produzione

          
          In questo modo, possiamo creare in modo efficiente un menu di volo per la nostra applicazione.

          Conclusione

          Per creare un menu di fly-out con CSS, il “

          " E "
          • "Gli elementi di HTML possono essere implementati per creare la struttura a fly-out. Il CSS "Schermo" E "trasformare"Le proprietà insieme a molte altre proprietà utili vengono utilizzate per formularle o progettarle. Questo post ha fornito una procedura completa per creare un menu Fly-out utilizzando CSS.