Autore:
Christy White
Data Della Creazione:
10 Maggio 2021
Data Di Aggiornamento:
1 Luglio 2024
Contenuto
Con un menu a discesa crei una panoramica chiara e gerarchica di tutte le parti importanti della pagina e delle sottosezioni che la pagina contiene. Devi solo spostare il mouse sulle sezioni principali per far apparire le sottosezioni. Puoi creare un menu a discesa utilizzando solo HTML e CSS.
Al passo
Parte 1 di 2: scrittura dell'HTML
Crea la tua sezione di navigazione. Normalmente usi nav> per la barra di navigazione a livello di sito web, intestazione> per sezioni di link più piccole che sono legate alla pagina o div> se nessun'altra opzione sembra adattarsi. Inseriscilo in un elemento div> in modo da poter regolare lo stile sia del contenitore che del menu stesso. - div>
- nav>
- / nav>
- / div>
Assegna a ciascuna sezione un attributo di classe. In seguito utilizzeremo l'attributo class per modificare lo stile di questi elementi con i CSS. Assegna sia al contenitore che al menu il proprio attributo di classe. - div>
- nav>
- / nav>
- / div>
Aggiungi un elenco di voci di menu. La lista non ordinata (ul>) contiene le voci del menu principale (voci della lista li>), se l'utente ci sposta il mouse sopra, vede i menu a tendina. Aggiungi la classe "clearfix" all'elemento della tua lista; ci arriveremo più avanti nel foglio di calcolo CSS. - div>
- nav>
- ul>
- li> Home / li>
- li> Dipendenti
- li> Contatto
- / li>
- / ul>
- / nav>
- / div>
Aggiungi collegamenti. Se queste voci di menu di primo livello si collegano anche alle proprie pagine, è ora possibile inserire i collegamenti. Collegamento a un'ancora inesistente (come "#!"), Anche se non si collegano a nulla, il cursore dell'utente avrà un aspetto diverso. In questo esempio, il contatto non porta da nessuna parte, ma le altre due voci di menu lo fanno: - div>
- nav>
- ul>
- li>a href = "/">Casa/ a>/ li>
- li>a href = "/ Dipendenti">Membri dello staff/ a>
- / li>
- li>a href = "#!">Contatto/ a>
- / li>
- / ul>
- / nav>
- / div>
Crea elenchi secondari per gli elementi a discesa. Dopo che lo stile è stato creato, questi elenchi formano il menu a discesa. Posiziona l'elenco nella voce di elenco su cui l'utente passerà il mouse. Aggiungi un attributo di classe e un collegamento proprio come prima. - div>
- nav>
- ul>
- li> a href = "/"> Home / a> / li>
- li> a href = "/ Employees"> Employees / a>
- ul>
- li> a href = "/ borsato"> Marco Borsato / a> / li>
- li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
- / ul>
- / li>
- li> a href = "#!"> Contatta / a>
- ul>
- li> a href = "mailto: [email protected]"> Segnala un problema / a> / li>
- li> a href = "/ support"> Assistenza clienti / a> / li>
- / ul>
- / li>
- / ul>
- / nav>
- / div>
Parte 2 di 2: scrittura del CSS
Apri il tuo foglio di stile CSS. Pubblica un link al tuo foglio di stile CSS nella sezione principale del tuo documento HTML se il link non è già presente. In questo articolo, non tratteremo le basi dei CSS, come l'impostazione di un carattere e il colore di sfondo. 
Aggiungi codice clearfix. Ricordi di aver aggiunto la classe "clearfix" all'elenco dei menu? Normalmente, gli elementi del menu a discesa hanno uno sfondo trasparente, che consente di spostare altri elementi. Un semplice adattamento al CSS può risolvere questo problema. Ecco una soluzione rapida e piacevole, anche se non funzionerà in Internet Explorer 7 e versioni precedenti: - .clearfix: dopo {
- contenuto: "";
- display: tabella;
- }
Crea il design di base. Con questo codice puoi posizionare il tuo menu nella parte superiore della pagina e nascondere gli elementi a discesa. Questo è molto semplice apposta in modo che possiamo concentrarci sul codice pertinente. Puoi modificarlo in seguito con codice CSS aggiuntivo, come riempimento e margine. - .nav-wrapper {
- larghezza: 100%;
- sfondo: # 008B8B;
- }
- .nav menu {
- posizione: relativa;
- display: blocco in linea;
- }
- .sub menu {
- posizione: assoluta;
- display: nessuno;
- sfondo: # 555;
- }
Fai apparire gli elementi a discesa quando passi il mouse su di essi. Gli elementi nell'elenco a discesa sono ora impostati in modo da non essere visualizzati. Ecco come visualizzare un intero sottoelenco non appena passi il mouse sopra il "genitore": - .nav-menu ul li: hover> ul {
- blocco di visualizzazione;
- }
- Nota: se i menu aggiuntivi sono nascosti nelle voci di menu nel menu a discesa, le proprietà aggiunte qui verranno applicate a tutti i menu. Se desideri applicare lo stile solo al primo livello dei menu a discesa, utilizza invece ".nav-menu> ul".
Indica con una freccia che è presente un menu a tendina. I web designer normalmente mostrano con una freccia verso il basso che un elemento apre un menu a discesa. Questo codice aggiunge quella freccia a ogni elemento nel tuo menu: - .nav menu> ul> li: after {
- contenuto: " 25BC"; / * Unicode con escape per la freccia giù * /
- dimensione del carattere: .5em;
- blocco di visualizzazione;
- posizione: assoluta;
- }
- Nota: regolare la posizione della freccia con le proprietà in alto, in basso, a destra o a sinistra.
- Nota: se non tutte le voci di menu hanno elenchi a discesa, non modificare l'aspetto dell'intero menu di navigazione della classe. Invece, aggiungi un'altra classe (come il menu a discesa) a ciascun elemento li in cui desideri una freccia. Fare riferimento a quella classe nel codice sopra.
Regola il riempimento, lo sfondo e altre proprietà. Il menu dovrebbe funzionare ora, ma non è ancora molto carino. Con le proprietà in CSS puoi personalizzare l'aspetto di ogni classe o elemento e dove si trovano.
Suggerimenti
- Se vuoi aggiungere un menu a discesa a un modulo, è molto semplice in HTML5 con l'elemento seleziona>.
- Il collegamento a href = "#"> scorre all'inizio della pagina e un collegamento che punta a un'ancora inesistente, come href = "#!">, Non scorre. Se ti sembra troppo sciatto, puoi cambiare l'aspetto del cursore con CSS.
- Quando copi e incolli il codice di esempio, rimuovi tutti i punti elenco.
