Se il menu di navigazione del tuo sito web è una riga orizzontale nella parte superiore o una riga verticale lungo il lato, è solo un elenco. Quando si progetta navigazione web, un menu di navigazione è un gruppo di collegamenti. Quando programmi la tua navigazione utilizzando XHTML+CSS, puoi creare un menu piccolo da scaricare (XHTML) e facile da personalizzare (CSS).
Iniziare
Per progettare un elenco per la navigazione, è necessario utilizzare un elenco. Potrebbe essere un elenco standard non ordinato che è stato identificato come navigazione. Per esempio:
- Casa
- Prodotti
- Servizi
- Contattaci
Quando si guarda l'HTML, il collegamento Home ha un ID di.
tu sei qui
Ciò ti consente di creare un menu che identifica la posizione corrente per i tuoi lettori. Anche se non hai intenzione di avere quel tipo di segnale visivo sul tuo sito in questo momento, puoi includere tali informazioni. Se decidi di aggiungere il segnale in un secondo momento, avrai meno codice per preparare il tuo sito.
Senza alcun Stile CSS, questo menu XHTML ha l'aspetto di un elenco non ordinato standard. Sono presenti punti elenco e gli elementi dell'elenco sono leggermente rientrati. Quando si usa link segnaposto, la maggior parte dei browser non visualizza i link come cliccabili (sottolineati e in blu). Quando incolli l'HTML in una pagina web, la tua navigazione si presenta così:
- Casa
- Prodotti
- Servizi
- Contattaci
Questo non assomiglia molto a un menu. Tuttavia, con alcuni stili CSS aggiunti all'elenco, puoi creare un menu che ti renda orgoglioso.
Se desideri altri esempi di menu verticali, esegui una ricerca sul Web per quanto segue:
- Un menu verticale in stile
- Un modello di menu verticale di base
- Un menu verticale in stile con You Are Here
- Un modello di menu verticale di base con You Are Here
Menu di navigazione verticale
Un menu di navigazione verticale è facile da scrivere perché viene visualizzato come un normale elenco: su e giù. Gli elementi dell'elenco vengono visualizzati verticalmente lungo la pagina.
Quando stilizzi i menu, inizia dall'esterno e lavora all'interno. Innanzitutto, dai uno stile alla navigazione:
ul#navigazione
Quindi, passa agli elementi e ai collegamenti. Innanzitutto, definisci la larghezza del menu. Ciò garantisce che se le voci di menu sono lunghe, le voci non spingeranno il resto del layout o causeranno lo scorrimento orizzontale.
ul#navigazione { width: 12em; }
Dopo aver impostato la larghezza, lavorare sugli elementi dell'elenco. Ciò ti consente di impostare cose come colori di sfondo, bordi, allineamento del testo e margini.
ul#navigazione li {
stile elenco: nessuno;
colore di sfondo: #039;
border-top: solido 1px #039;
allineamento del testo: a sinistra;
margine: 0;
}
Dopo aver impostato le basi per gli elementi dell'elenco, lavora sull'aspetto del menu nell'area dei collegamenti. Per prima cosa stile la navigazione:
UL#navigazione LI A
Quindi, modella quanto segue:
Un collegamento
A: visitato
A: passa il mouse
A: attivo
Per i collegamenti, rendere i collegamenti un elemento di blocco (piuttosto che l'impostazione predefinita in linea). Ciò costringe i collegamenti a occupare l'intero spazio della LI e ad agire come un paragrafo, rendendo i collegamenti più facili da definire come pulsanti di menu. Quindi, rimuovere quanto segue:
sottolineatura, decorazione del testo: nessuna; come
Questo rende i pulsanti più simili a pulsanti. Il tuo design potrebbe essere diverso.
ul#navigazione li a {
blocco di visualizzazione;
decorazione del testo: nessuna;
imbottitura: .25em;
bordo inferiore: solido 1px #39f;
bordo destro: solido 1px #39f;
}
Con il blocco di visualizzazione; impostato sui link, è cliccabile l'intero riquadro della voce di menu, non solo le lettere. Questo è anche un bene per l'usabilità. Imposta i colori del collegamento (collegamento, visitato, al passaggio del mouse e attivo) se desideri che i collegamenti siano diversi dal blu, dal rosso e dal viola predefiniti.
a: link, a: visitato { color: #fff; }
a: hover, a: active { color: #000; }
Puoi anche prestare un po' di attenzione allo stato al passaggio del mouse cambiando il colore di sfondo.
a: hover { background-color: #fff; }
Menu di navigazione orizzontale
La creazione di menu di navigazione orizzontale è leggermente più difficile rispetto ai menu di navigazione verticale perché devi compensare il fatto che gli elenchi HTML preferiscono essere visualizzati in verticale. Come con il menu orizzontale, crea l'elenco del menu di navigazione:
- Casa
- Prodotti
- Servizi
- Contattaci
Per creare un menu orizzontale, lavora come hai fatto con il menu verticale. Inizia con l'esterno e lavora all'interno. Per avviare la navigazione nell'angolo sinistro, impostalo con 0 margine sinistro e padding e spostalo a sinistra.
Prendi l'abitudine di impostare la larghezza in modo che il tuo menu non occupi più o meno spazio del previsto. Per i menu orizzontali, questa è solitamente l'intera larghezza del disegno. Puoi anche aggiungere un colore di sfondo all'elenco per facilitarne la lettura.
ul#navigazione {
galleggiante: sinistro;
margine: 0;
imbottitura: 0;
larghezza: 100%;
colore di sfondo: #039;
}
Il segreto del menu di navigazione orizzontale è nelle voci dell'elenco. Gli elementi dell'elenco sono normalmente elementi di blocco, il che significa che questi elementi hanno una nuova riga posizionata prima e dopo ciascuno di essi. Passando la visualizzazione da blocco a in linea, si forza l'allineamento orizzontale degli elementi dell'elenco uno accanto all'altro.
ul#navigation li { display: inline; }
Tratta i link esattamente come il menu di navigazione verticale, con gli stessi colori e la stessa decorazione del testo. Aggiungi un bordo superiore per delineare i pulsanti quando l'utente passa il mouse su un pulsante. Quindi, rimuovere blocco di visualizzazione; poiché ciò rimette le nuove righe e distrugge il menu orizzontale.
Sei qui Informazioni sulla posizione
Un altro aspetto dell'HTML è questo identificatore:
tu sei qui
Se desideri modificare il tuo menu per indicare la posizione attuale dei tuoi utenti, usa questo ID per definire un colore di sfondo diverso o un altro stile. Sposta quell'ID attributo nella voce di menu corretta su altre pagine in modo che la pagina corrente sia sempre evidenziata.
Se metti insieme questi stili sulla tua pagina, puoi creare una barra dei menu orizzontale o verticale che funzioni con il tuo sito ed è veloce da scaricare e facile da aggiornare. L'utilizzo di XHTML+CSS trasforma le tue liste in un potente strumento di progettazione.
Se desideri altri esempi di menu orizzontali, cerca nel Web quanto segue:
- Un menu orizzontale in stile
- Un modello di menu orizzontale di base
- Un menu orizzontale in stile con You Are Here
- Un modello di menu orizzontale di base con You Are Here