Istruzioni passo passo gratis 
Crea un menu a tendina con html e css
Con un menu a tendina 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 tendina usando solo HTML e CSS.
Passi
Parte 1 di 2: Scrivere l`HTML
1. Crea la tua sezione di navigazione. Normalmente usi
2. Assegna a ogni sezione un attributo di classe. Useremo l`attributo class in seguito per definire questi elementi con i CSS. Assegna sia al contenitore che al menu il proprio attributo di classe.
classe="involucro di navigazione"> 
3. Aggiungi un elenco di voci di menu. L`elenco non ordinato ( 
4. Aggiungi collegamenti. Se anche queste voci di menu di livello superiore si collegano a pagine proprie, ora puoi inserire i collegamenti. Collegamento a un`ancora inesistente (come "#!"), anche se non si collegano a nulla, quindi il cursore dell`utente ha un aspetto diverso. In questo esempio, Contact non porta da nessuna parte, ma le altre due voci di menu lo fanno:
5. Crea sottoliste per gli elementi a discesa. Dopo aver creato lo stile, questi elenchi formano il menu a discesa. Posizionare l`elenco nell`elemento dell`elenco su cui l`utente passerà il mouse. Aggiungi un attributo di classe e un collegamento proprio come prima.
-
Parte 2 di 2: Scrivere il CSS
1. Apri il tuo foglio di stile CSS. Inserisci un link al tuo foglio di stile CSS nella sezione head del tuo documento HTML se il link non è già presente. In questo articolo non tratteremo le basi dei CSS, come impostare un carattere e un colore di sfondo.
2. Aggiungi codice clearfix. Ti ricordi quando hai preso il "soluzione chiara"-classe all`elenco dei menu? Normalmente, gli elementi del menu a tendina hanno uno sfondo trasparente, che permette di spostare altri elementi. Un semplice ritocco CSS può risolvere questo problema. Ecco una soluzione piacevole e veloce, anche se non funzionerà in Internet Explorer 7 e versioni precedenti:- .clearfix: dopo {
- contenuto: "";
- display: tavolo;
- }
3. 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 sobrio di proposito in modo che possiamo concentrarci sul codice pertinente. Puoi personalizzarlo in seguito con codice CSS aggiuntivo, come padding e margin.- .involucro di navigazione {
- larghezza: 100%;
- sfondo: #008B8B;
- }
- .menu di navigazione {
- posizione: relativa;
- display: blocco in linea;
- }
- .sottomenu {
- posizione: assoluta;
- display: nessuno;
- sfondo: #555;
- }
4. Fai apparire gli elementi a discesa quando passi il mouse su di essi. Gli elementi nell`elenco a discesa sono ora impostati in modo che non vengano visualizzati. Ecco come far apparire un intero sottoelenco una volta che hai finito "genitore" si muove:- .menu di navigazione ul li: passa il mouse > ul {
- blocco di visualizzazione;
- }
- Nota: se le voci di menu nel menu a discesa contengono menu aggiuntivi, le proprietà aggiunte qui verranno applicate a tutti i menu. Se vuoi che lo stile si applichi solo al primo livello dei menu a discesa, usa invece ".menù di navigazione > ul".
5. Indicare con una freccia che è presente un menu a tendina. I web designer normalmente mostrano con una freccia giù che un elemento apre un menu a tendina. Questo codice aggiunge quella freccia a ogni elemento del tuo menu:- .menù di navigazione > ul > li:dopo {
- contenuto: "25BC"; /*unicode sfuggito alla freccia in basso*/
- dimensione del font: .5 em;
- blocco di visualizzazione;
- posizione: assoluta;
- }
- Nota — Regolare la posizione della freccia utilizzando le proprietà eigenschappen in alto, in basso, a destra oa sinistra.
- Nota: se non tutte le voci di menu hanno menu a discesa, non riprogettare l`intero menu di navigazione della classe. Invece, aggiungi un`altra classe (come il menu a discesa) a ciascun elemento li in cui vuoi una freccia. Fare riferimento a quella classe nel codice sopra.
6. Regola il riempimento, lo sfondo e altre proprietà. Il menu dovrebbe funzionare ora, ma non è ancora molto carino. Le proprietà in CSS ti consentono di personalizzare l`aspetto di ogni classe o elemento e la posizione in cui si trovano.Consigli
- Se vuoi aggiungere un menu a discesa a un modulo è molto semplice in HTML5 con l`elemento
- con il collegamento
- Se copi e incolli il codice di esempio, rimuovi tutti i punti elenco.
Articoli sull'argomento "Crea un menu a tendina con html e css"
Condividi sui social network:
