Con l'aiuto di un buon codice HTML e semplici regole CSS, puoi creare un bel menu a comparsa che può essere facilmente modificato e integrato. Utilizzando il linguaggio di markup e i fogli di stile a cascata, puoi assicurarti che i menu funzionino correttamente in tutti i browser.
Istruzioni
Passo 1
Per prima cosa, costruisci la struttura di base del tuo menu. Apri un editor di testo e crea un elenco numerato con un sottomenu che funge da elemento dell'elenco padre. Per esempio:
-
Primo elemento
- Elemento a discesa
- Menu a discesa2
Passo 2
Salva l'elenco generato in un file html separato. Quindi, crea un file con estensione.css e inserisci tutti i parametri del foglio di stile.
Passaggio 3
Rimuovere eventuali spaziature e punti elenco presenti nell'elenco puntato e impostare la larghezza del menu utilizzando gli strumenti CSS: ul {list-style: none;
larghezza: 200px; }
Passaggio 4
Imposta la posizione relativa di tutti gli elementi nell'elenco utilizzando l'attributo position: ul li {position: relative; }
Passaggio 5
Successivamente, è necessario progettare un sottomenu, ciascuno dei cui elementi apparirà a destra del menu principale nel momento in cui il puntatore del mouse si trova sull'elemento: li ul {position: absolute;
sinistra: 199 px;
in alto: 0;
display: nessuno; } L'attributo di sinistra è un pixel in meno della larghezza del menu stesso. Ciò consente di posizionare in modo intelligente gli elementi pop-up senza creare doppi bordi. L'attributo di visualizzazione viene utilizzato per nascondere il sottomenu all'apertura della pagina.
Passaggio 6
Stile i collegamenti come desiderato utilizzando le opzioni CSS appropriate. Includere il parametro display: block in modo che ogni collegamento occupi tutto lo spazio che gli è stato riservato.
Passaggio 7
Per far apparire il menu nel momento in cui il cursore è sopra di esso (hover), è necessario inserire il codice: li: hover ul {display: block; }
Passaggio 8
Imposta opzioni aggiuntive per visualizzare i collegamenti e gli elementi dell'elenco come desiderato.
Passaggio 9
Il menu a comparsa è pronto. Ora resta da includere l'attributo nel file.html: Menu a comparsa
