Gli elementi e il collegamento correlato saranno specificati nel tag. Html
Navigazione verticale Di conseguenza, la struttura del menu di navigazione sembrerà così:
Il CSS può essere utilizzato per trasformare i menu HTML semplici in barre di navigazione visivamente allettanti. Quindi, applichiamo proprietà CSS agli elementi HTML aggiunti.
Stile tutti gli elementi
* Tutti gli elementi del file HTML sono dotati del margine e delle proprietà di imbottitura con il valore impostato come 0px.
Style Vertical-Nav Div
.verticale-nav IL ".Vertical-Nav "Viene utilizzato per accedere al NAV verticale della classe Div. Di seguito sono riportate le proprietà applicate ad esso:
"colore di sfondo "Specifica il colore dello sfondo dell'elemento. "larghezza "La proprietà regola la larghezza dell'elemento. "altezza "La proprietà regola l'altezza dell'elemento. "imbottitura-sinistra "La proprietà imposta spazio a sinistra del contenuto dell'elemento. "imbottitura "La proprietà imposta spazio nella parte superiore del contenuto dell'elemento. "famiglia di font "La proprietà applica lo stile dei caratteri al testo dell'elemento. L'elenco è fornito per assicurarsi che il browser non supporti il primo stile, l'altro verrà applicato al carattere. Stile Elemento H1 di Div verticale-nav
.Vertical-Nav H1 Le seguenti proprietà vengono applicate all'elemento H1 di intestazione:
"margin-bottom "La proprietà imposta lo spazio nella parte inferiore dell'intestazione. "colore "La proprietà imposta il colore del carattere specificato. Finora, le proprietà applicate visualizzeranno il menu di navigazione come mostrato nell'immagine seguente:
Ora, rimuoviamo i proiettili dall'elenco.
Elemento “UL” stile di div Vertical-Nav
.verticale-nav ul IL "stile elenco "Proprietà con il valore impostato come"nessuno "Rimuoverà i proiettili dall'elenco.
Elemento "A" di stile dell'elemento Li
.Vertical-nav ul li a IL ".verticale-nav ul li a "Definisce il percorso del tag. Le seguenti proprietà sono applicate ad esso:
"decorazione del testo "Con il valore"nessuno "Rimuove la decorazione sottolinea dall'elenco. "Schermo "Proprietà con il valore impostato come"bloccare "Imposterà ogni elemento dell'elenco in una riga. "larghezza "La proprietà viene utilizzata per l'impostazione della larghezza dell'elemento. "sfondo "La proprietà viene utilizzata per aggiungere effetti allo sfondo dell'elemento. "colore "La proprietà specifica il colore del carattere. "Box-Shadow "La proprietà specifica gli offset X e Y, il raggio di sfocatura e la diffusione e il colore dell'ombra. "raggio di confine "La proprietà rende i bordi dell'elemento. "margine "La proprietà imposta lo spazio attorno all'elemento. "imbottitura "La proprietà specifica lo spazio attorno al contenuto dell'elemento. Di conseguenza, la barra di navigazione apparirà come segue:
Applichiamo alcuni effetti di transizione ai menu di navigazione creati sopra.
Suggerimento bonus: applicare la transizione al menu di navigazione verticale
Ora applicheremo la transizione al "UN "Elemento:
Transizione: tutti 0.3s facilità; Ecco la descrizione del blocco di codice sopra dato:
La proprietà di transizione è specificata come "Tutto "Il che significa che la transizione applicata a tutte le proprietà. La durata della transizione è specificata come "0.3s ". La funzionalità di transizione è specificata come "sollievo ", Il che si traduce in un aumento della velocità al centro della transizione e poi rallenta alla fine. Elemento "A" di stile su Hover
.verticale-nav ul li a: hover Di seguito sono descritte le proprietà di cui sopra applicate all'elemento "A" del nav verticale:
"colore di sfondo "La proprietà specifica il colore dello sfondo dell'elemento. "colore "La proprietà specifica il colore del carattere dell'elemento. "trasformare "La proprietà viene applicata con il valore come scala (1.1, 1.5). Questa funzione scala () definisce una trasformazione del piano 2D. Salva il codice sopra menzionato e aprilo nel browser. La barra del menu di navigazione sarà così:
Abbiamo imparato con successo a creare un menu di navigazione verticale con CSS.
Conclusione
La barra di navigazione svolge un ruolo vitale nel rendere qualsiasi sito Web intuitivo. È costituito da un elenco di collegamenti a diverse sezioni dell'applicazione. In html, il
E Gli elementi vengono utilizzati per creare l'elenco dei collegamenti, in particolare nella barra di navigazione. Per renderli interattivi, vengono applicate proprietà di stile diverse utilizzando CSS. Questo studio ha spiegato la procedura per creare e animare un menu di navigazione verticale con CSS.
