Come fare una barra di navigazione in HTML?

Nel calcolo moderno, una pagina Web può contenere collegamenti che reindirizzano a diverse altre pagine. Di solito, questi collegamenti sono posizionati in una posizione specifica sulla pagina web. Il pezzo specifico che contiene questi collegamenti è noto come barra navigazionale.

La barra di navigazione è il componente principale di qualsiasi pagina Web/sito Web. Una barra di navigazione potrebbe essere nella direzione orizzontale o verticale. Tenendo conto dell'importanza delle barre di navigazione, questo post delinea diversi metodi per creare una barra di navigazione in HTML. I possibili risultati di questo blog sono:

• Come creare una barra di navigazione orizzontale in HTML?
• Come creare una barra di navigazione verticale in HTML?

Metodo 1: come creare una barra di navigazione orizzontale in HTML?

Il documento HTML è la combinazione di centinaia di tag. Ogni tag si riferisce ad alcune funzionalità specifiche. Inoltre, puoi combinare più elementi per creare un design personalizzato. Una barra di navigazione può essere creata con l'aiuto di

E
• tag. Questa sezione fornisce una guida dettagliata per creare barre orizzontali in HTML.

  Di seguito viene visualizzato il codice HTML per creare una barra di navigazione orizzontale.

  Html

  
  
  
  
  
  
  
  
  
  
  
  • Casa
  
  
  • Chi siamo
  
  
  • Contattaci
  
  
  • Galleria
  
  
  
  
  
  

  In questo codice:

  • Abbiamo creato un .
  • All'interno, un elenco viene creato utilizzando
    etichetta.
    • Per aggiungere gli elementi in
      tag, abbiamo inserito gli elementi dell'elenco utilizzando
      • etichetta.
      • Infine, all'interno del tag inseriamo i collegamenti ad altre pagine HTML usando il tag.

      Per una migliore presentazione, il seguente codice CSS viene applicato su HTML.

      CSS

      ul
      
      stile elenco: nessuno;
      
      li a
      
      DECORAZIONE DEL TESTO: Nessuno;
      blocco di visualizzazione;
      Float: a sinistra;
      imbottitura: 10px 15px;
      Font-size: 20px;
      Background-color: LightGray;
      colore nero;
      Font-Family: Georgia, "Times New Roman", Times, Serif;
      
      li a: hover
      
      Background-color: Lightsalmon;
      colore bianco;
      

      Nel codice sopra:

      • La proprietà di stile dell'elenco non è impostata su nessuno.
      • Inoltre, varie proprietà CSS tra cui (decorazione del testo, display, galleggiante ecc.) vengono applicati negli elementi dell'elenco.
      • Un effetto hover viene aggiunto anche al
      • etichetta.

      Produzione

      L'output mostra che abbiamo creato correttamente una barra di navigazione orizzontale utilizzando HTML e CSS.

      Metodo 2: come creare una barra di navigazione verticale in HTML?

      Gli ingredienti primari (

      ,
      • ) sono gli stessi per le barre verticali e orizzontali. Pertanto, una barra verticale è facile da creare. In questo esempio, abbiamo esercitato il seguente codice per creare una barra di navigazione in HTML:

        Html

        
        
        
        
        
        
        
        
        
        
        • Casa
        
        
        • Chi siamo
        
        
        • Contattaci
        
        
        • Galleria
        
        
        
        
        

        In questo codice:

        • Abbiamo creato un elenco usando il
          etichetta.
          • Dentro il
            tag, abbiamo inserito gli elementi dell'elenco utilizzando il
            • etichetta.
            • Quindi, abbiamo inserito i collegamenti ad altre pagine HTML usando il tag.

            Per una migliore estetica della barra di navigazione, abbiamo utilizzato il seguente codice CSS e inserito in un file CSS esterno:

            CSS

            ul
            
            stile elenco: nessuno;
            
            li a
            
            DECORAZIONE DEL TESTO: Nessuno;
            blocco di visualizzazione;
            larghezza: 180px;
            imbottitura: 10px 15px;
            Font-size: 20px;
            Background-color: LightGray;
            colore nero;
            Font-Family: Georgia, "Times New Roman", Times, Serif;
            
            li a: hover
            
            Background-color: Lightsalmon;
            colore bianco;
            

            Nel codice CSS sopra:

            • Lo stile dell'elenco non è impostato su nessuno.
            • Diversi stili vengono applicati negli elementi dell'elenco.
            • Infine, l'effetto hover viene applicato anche sugli elementi dell'elenco.

            Produzione
            

            L'output mostra che abbiamo creato correttamente una barra di navigazione verticale.

            Ecco qui! Hai imparato a creare una barra di navigazione orizzontale e verticale in HTML.

            Conclusione

            In HTML, possiamo fare una barra di navigazione creando un semplice elenco utilizzando

            ,
            • e tag. Una barra di navigazione può essere verticale o orizzontale. Inoltre, puoi aggiungere vari stili applicando il CSS. Questo post ha dimostrato i metodi per creare barre di navigazione in HTML. Con l'aiuto di una barra di navigazione, si può navigare verso le varie pagine del sito Web.