Indipendentemente dal fatto che il menu di navigazione sia una riga orizzontale nella parte superiore o una riga verticale lungo il lato, è pur sempre un elenco. Quando si progetta la navigazione Web, è spesso facile dimenticare che un menu di navigazione è solo un gruppo di collegamenti glorificato. Ma se si programma la navigazione utilizzando XHTML + CSS, è possibile creare un menu di dimensioni ridotte da scaricare (XHTML) e facile da personalizzare (CSS).
Iniziare
Per iniziare a progettare un elenco per la navigazione, è necessario utilizzare un elenco. Potrebbe essere una lista non ordinata standard che è stata identificata come la navigazione:
Se osservi attentamente l'HTML, noterai che il link "Home" ha anche un ID di
tu sei qui. Questo ti permetterà di creare un menu che identifichi la posizione corrente per i tuoi lettori. Anche se non hai intenzione di avere quel tipo di spunto visivo sul tuo sito adesso, puoi includere tali informazioni. Se decidi di aggiungere la stecca in seguito, avrai meno codice per preparare il tuo sito.
Senza lo stile CSS, questo menu XHTML ha l'aspetto di un elenco standard non ordinato. Ci sono proiettili e gli elementi della lista sono leggermente rientrati. Poiché sto usando link segnaposto, la maggior parte dei browser non visualizza i link come cliccabili (sottolineati e in blu). Se si incolla l'HTML sopra in una pagina Web, la navigazione sarà simile a questa:
- Casa
- Prodotti
- Servizi
- Contattaci
Questo è piuttosto noioso e non assomiglia molto a un menu. Ma con pochi stili CSS aggiunti all'elenco, puoi creare un menu che ti rende orgoglioso.
Menu di navigazione verticale
Un menu di navigazione verticale è molto facile da scrivere perché viene visualizzato allo stesso modo di un elenco normale: su e giù. Le voci dell'elenco vengono visualizzate verticalmente lungo la pagina.
Quando faccio i menu per lo styling, mi piace iniziare all'esterno e lavorare. Con questo intendo dire che prima ho stile
ul # navigazione e poi passare al
Li elementi e quindi i collegamenti, ecc. Quindi per questo menu, prima si definisce la larghezza del menu. Ciò assicurerà che anche se le voci del menu sono lunghe, non sposteranno il resto del layout o causeranno lo scorrimento orizzontale.
navigazione ul # {larghezza: 12em; }
Una volta impostata la larghezza, posso giocare con le voci dell'elenco. Questo mi consente di impostare cose come (per eliminare i proiettili), i colori di sfondo, i bordi, l'allineamento del testo e i margini.
ul # navigation li {stile elenco: nessuno;background-color: # 039;border-top: solido 1px # 039;allineamento del testo: a sinistra;margine: 0;} Una volta impostate le nozioni di base per gli elementi dell'elenco, puoi iniziare a giocare con l'aspetto del menu nell'area dei collegamenti. Primo stile Navigazione UL # LI Ae poi il Un collegamento, A: visited, A: hover, e A: attiva (se li vuoi). Per i collegamenti, mi piace rendere i collegamenti un elemento di blocco (piuttosto che il predefinito in linea). Questo li costringe a occupare l'intero spazio del LI-E si comportano più come un paragrafo, il che li rende più facili da stile come pulsanti di menu. L'altra cosa che faccio sempre è rimuovere la sottolineatura ( decorazione del testo: nessuna;), in quanto rende i pulsanti più simili ai pulsanti per me. Ma ovviamente il tuo design potrebbe essere diverso. ul # navigation li a {blocco di visualizzazione;decorazione del testo: nessuna;imbottitura: .25em;border-bottom: solid 1px # 39f;border-right: solid 1px # 39f;} Notare che con il blocco di visualizzazione; impostare sui collegamenti, l'intera casella della voce di menu è selezionabile, non solo le lettere. Questo è anche un bene per l'usabilità. Assicurati di impostare i colori dei collegamenti (link, visitato, hover e attivo) se vuoi che siano diversi dal blu, rosso e viola di default. a: link, a: visited {color: #fff; }a: hover, a: active {color: # 000; } Mi piace anche dare allo stato hover un po 'più di attenzione cambiando il colore dello sfondo. a: hover {background-color: #fff; } Se desideri altri esempi di menu verticali, consulta l'elenco di seguito. La creazione di menu di navigazione orizzontali è leggermente più difficile rispetto ai menu di navigazione verticale perché è necessario compensare il fatto che gli elenchi HTML preferiscono la visualizzazione verticale. Come per il menu orizzontale, per prima cosa crea il tuo elenco di menu di navigazione:
Per creare un menu orizzontale, funziona come nel menu verticale. Inizia dall'esterno e prosegui. Poiché desidero iniziare la navigazione nell'angolo sinistro, lo imposto con 0 margine sinistro e padding, quindi lo sposto a sinistra. Dovresti anche prendere l'abitudine di impostare la larghezza in modo che il tuo menu non occupi più o meno spazio di quello che intendi. Per i menu orizzontali, di solito questa è l'intera larghezza del disegno. Ho anche aggiunto un colore di sfondo all'intero elenco per renderlo più facile da leggere. ul # navigation {fluttuare: a sinistra;margine: 0;padding: 0;larghezza: 100%;background-color: # 039;} Ma il segreto del menu di navigazione orizzontale è nelle voci dell'elenco. Gli elementi dell'elenco sono normalmente elementi di blocco, il che significa che avranno una riga nuova prima e dopo ciascuno. Commutando il display da bloccare a in linea, costringi gli elementi della lista ad allineare l'uno accanto all'altro orizzontalmente. ul # navigation li {display: inline; } Ho trattato i collegamenti esattamente come li ho trattati nel menu di navigazione verticale, con gli stessi colori e la decorazione del testo. Ho aggiunto un bordo superiore per delineare i pulsanti quando sono aleggiati sopra. L'unica cosa rimossa è stata la blocco di visualizzazione; come quello rimetterà le nuove linee e distruggerà il menu orizzontale. ul # navigation li a {decorazione del testo: nessuna;imbottitura: .25em 1em;border-bottom: solid 1px # 39f;border-top: solido 1px # 39f;border-right: solid 1px # 39f;}a: link, a: visited {color: #fff; }ul # navigation li a: hover {background-color: #fff;colore: # 000;} Un altro aspetto dell'HTML è l'identificatore tu sei qui. Se vuoi modificare il menu per indicare la posizione corrente dei tuoi utenti, usa semplicemente questo ID per definire un diverso colore di sfondo o un altro stile. Sposta questo attributo ID alla voce di menu corretta su altre pagine in modo che la pagina corrente sia sempre evidenziata. ul # navigation li # you arehere a {background-color: # 09f; } Se metti insieme questi stili sulla tua pagina, puoi creare una barra dei menu orizzontale o verticale che funzioni con il tuo sito, ma è veloce da scaricare e molto facile da aggiornare in futuro. L'uso di XHTML + CSS trasforma le tue liste in uno strumento molto potente per la progettazione. Se desideri altri esempi di menu orizzontali, consulta quanto segue.
Menu di navigazione orizzontale
Siete qui Informazioni sulla posizione
