Come creare un menu a discesa in HTML usando CSS?

Un menu a discesa è un modo per consentire all'utente di esplorare diverse opzioni disponibili per lui/lei quando si utilizza un sito Web. Questi sono in qualche modo un widget necessario durante la progettazione di un sito Web. CSS ti consente di creare menu a discesa di bell'aspetto che aumentano il complesso dell'esperienza dell'utente e abbellisce l'aspetto del tuo sito Web. Questo post è composto da fornire:

1. Creazione di una casella a discesa
2. Creazione di un menu a discesa

Cominciamo

Creazione di una casella a discesa

Spesso devi aver visto che quando porti il ​​cursore del mouse su un pezzo di testo o un pulsante su un sito Web appare una casella a discesa. Ecco come è fatto.

Esempio

Questo esempio dimostra la creazione di una scatola a discesa.

Html

Porta il mouse qui

Cliccami

Per creare una scatola a discesa, prima di tutto abbiamo realizzato un contenitore div per posizionare il contenuto della scatola a discesa al suo interno, inoltre, per aprire la scatola a discesa abbiamo usato un elemento.

CSS

.cadere in picchiata
Posizione: relativo;
display: blocco inline;

La classe "a discesa" è stata assegnata al primo contenitore di div che nidifica il contenuto. Abbiamo impostato la sua posizione su un parente in modo che quando si aprirà il menu a discesa, viene posizionato proprio sotto il pulsante.

CSS

.a discesa-contenuto
visualizzazione: nessuno;
Background-color: Whitesmoke;
larghezza: 100%;
imbottitura: 15px;

Il contenitore Div che contiene il contenuto a discesa è stato assegnato la classe "Content a discesa". Non abbiamo impostato il display su nessuno, inoltre, gli ha dato un po 'di larghezza e imbottitura.

CSS

.Dropdown: hover .a discesa-contenuto
blocco di visualizzazione;

Inoltre, per rendere il discesa orizzontale, lo abbiamo assegnato lo stato del bordo e impostare il display su bloccare in modo che appaia sotto il pulsante.

E infine, abbiamo disegnato il nostro pulsante anche secondo il nostro desiderio.

pulsante
imbottitura: 5px;
Background-color: grano;
Font-Family: Lucida Sans;

Produzione

Una scatola a discesa è stata creata con successo. Ora passiamo alla creazione di un menu a discesa.

Creazione di un menu a discesa

Un menu a discesa consiste in un elenco di opzioni e si apre solo quando un utente porta il cursore del mouse su di esso. È possibile creare un menu a discesa sul tuo sito Web utilizzando CSS. Segui l'esempio di seguito.

Html

Menù

Contattaci
Chi siamo
Altro

Qui abbiamo aggiunto tag di ancoraggio per fornire più opzioni nel menu a discesa.

CSS

.Dropbtn
Background-color: salmone;
colore bianco;
larghezza: 100px;
imbottitura: 18px;
Bordo: 0;
Font-size: 17px;

Innanzitutto noi stiamo dando un po 'di stile al nostro pulsante usando varie proprietà CSS.

CSS

.cadere in picchiata
Posizione: relativo;
display: blocco inline;
larghezza: 160px;

Come già spiegato sopra, abbiamo impostato la posizione del div con la classe "a discesa" su un parente in modo che quando si apre il discesa, viene posizionato proprio sotto il pulsante.

CSS

.a discesa-contenuto
visualizzazione: nessuno;
Background-color: Whitesmoke;
larghezza: 100%;

Qui stiamo usando alcune proprietà CSS di base per modellare il nostro contenuto a discesa.

CSS

.a discesa un contenuto a
blocco di visualizzazione;
colore nero;
imbottitura: 12px;
DECORAZIONE DEL TESTO: Nessuno;

Nel codice CSS sopra, stiamo disegnando i collegamenti presenti all'interno del menu a discesa. Abbiamo impostato il loro display su bloccare in modo che ogni collegamento appare su una nuova riga.

CSS

.Dropdown: hover .Dropbtn
Background-color: SandyBrown;

.Dropdown-Content A: Hover
Background-color: LightGrey;

.Dropdown: hover .a discesa-contenuto
blocco di visualizzazione;

Qui stiamo accontentando gli effetti del mouse per il pulsante del menu e il menu a discesa.

Produzione

Ecco come è possibile creare correttamente un menu a discesa.

Conclusione

Un menu a discesa fornisce a un utente diverse opzioni disponibili per lui/lei quando si utilizza un sito Web. È possibile creare questi menu a discesa usando diverse proprietà CSS. Ai fini della creazione di una casella a discesa di base è possibile utilizzare un contenitore di div e posizionare il contenuto a discesa al suo interno, inoltre, usando le proprietà CSS puoi dargli un po 'di stile. Una volta che hai imparato come creare una casella a discesa di base, è possibile utilizzare tecniche simili per creare un menu a discesa. Questa guida ti insegna come creare un menu a discesa con l'aiuto di un esempio appropriato.