Contenuto

• Passi
• Consigli
• avvertimento

Questo articolo mostra come creare menu a discesa sul tuo sito web utilizzando codice HTML e CSS. Quando il visitatore passa il puntatore del mouse sul pulsante specificato, verrà visualizzato un menu a discesa; Successivamente, possono fare clic su uno degli elementi per accedere al sito Web di tale opzione.

Passi

1. 

   Apri l'editor di testo HTML. Puoi utilizzare un semplice editor di testo (Notepad, TextEdit) o ​​più avanzato (Notepad ++).
   • Se decidi di andare su Notepad ++, devi scegliere HTML dalla parte "H" del menu linguaggio (Lingua) nella parte superiore della finestra prima di continuare.

2. 

   
   
   Immettere un titolo per il documento. Ecco il codice che determina il tipo di codice da utilizzare per il resto del documento:

3. 

   Crea menu a discesa. Inserisci il seguente codice per specificare la dimensione e il colore del menù a tendina, ricordati di sostituire il "#" con il parametro che vuoi utilizzare (più grande è il numero, più grande sarà il menù a tendina). Possiamo anche sostituire il colore di sfondo "background-color" e il colore "color" con qualsiasi colore (o codice colore HTML) che desideri:

4. 

   
   
   Specificare che si desidera sostituire i collegamenti nel menu a discesa. Dato che poi aggiungerai dei link al menu, puoi sostituirli nel menu a tendina inserendo il seguente codice:

5. 

   Crea l'aspetto del menu a discesa. Il codice seguente determina la dimensione e il colore del menu a discesa, inclusa la posizione se combinato con altri elementi sulla pagina web. Non dimenticare di sostituire il "#" nella sezione "larghezza minima" con il numero che desideri (ad es. 250) e cambiare l'intestazione "background-color" (colore di sfondo) con un colore specifico o codice HTML:

6. 

   
   
   Aggiungi dettagli al contenuto del menu a discesa. Il codice seguente specificherà il colore del testo all'interno e la dimensione del pulsante del menu a discesa. Non dimenticare di sostituire il "#" con il numero di pixel che definisce la dimensione del pulsante del menu:

7. 

   Modifica il modo in cui il puntatore del mouse cambia quando si passa con il mouse nel menu a discesa. Quando passi il puntatore del mouse sul pulsante del menu, alcuni colori devono essere modificati. La linea "background-color" rifletterà il colore cambiato quando selezioni qualcosa nel menu a discesa, mentre la seconda linea "background-color" è il colore in cui cambierà il pulsante del menu. Idealmente, entrambi questi colori dovrebbero essere più chiari di quando erano deselezionati:

8. 

   Chiudi la sezione CSS. Inserisci il codice seguente per specificare che hai finito con la parte CSS del documento:

9. 

   Crea un nome per il pulsante del menu. Immettere il codice seguente ma ricordarsi di sostituire "Nome" con il nome del pulsante del menu a discesa (ad esempio: Menù):

10. 

    Aggiungi collegamenti al menu. Ogni elemento nel menu a discesa si collegherà a qualcosa, che si tratti di una pagina del sito Web corrente o di un sito Web esterno. Aggiungi la tua selezione al menu a tendina inserendo il seguente codice, che devi sostituire https://www.website.com con l'indirizzo del collegamento (mantenere le parentesi) e sostituire "Nome" con il nome del collegamento.

11. 

    Chiudi documento. Immettere i seguenti tag per chiudere il documento e specificare la fine del codice del menu a discesa:

12. 

    Il codice di revisione specifica il menu a discesa. Lo snippet avrà un aspetto simile a questo: Annunci

Consigli

• Controlla sempre il codice prima di pubblicare sul sito web.
• Le istruzioni precedenti riguardano i menu a discesa che funzioneranno quando si passa il puntatore del mouse sul pulsante del menu. Se si desidera creare un menu a discesa che fa clic solo quando si fa clic, è necessario utilizzare JavaScript.

avvertimento

• La colorazione HTML è piuttosto limitata quando usiamo tag come "nero" o "verde". Puoi controllare il generatore di codice colore HTML che consente agli utenti di creare e utilizzare colori personalizzati qui.