Menù orizzontale. Menu orizzontale CSS

Dall'autore: Do il benvenuto a tutti. Per qualche ragione, i webmaster associano un menu a tendina agli script, ma per molto tempo tale navigazione può essere eseguita in assoluta sicurezza utilizzando i css puri. Inoltre, un tale menu non sarà peggiore. Oggi vi mostrerò come creare un menu a tendina in css. Condividerò, per così dire, una ricetta.

Programma della lezione e layout del nostro menu

In generale, prima decidiamo come creeremo il menu stesso. In HTML5, il modo standard è crearlo in un contenitore di navigazione utilizzando un elenco puntato. Facciamo proprio questo. Rimuoveremo i marcatori in seguito usando css, non ne abbiamo affatto bisogno nel menu.

In realtà, scriverò immediatamente markup con elenchi annidati in html. Cioè, il nostro elenco sarà a due livelli: conterrà altri elenchi. Vale a dire, per ogni elenco di elementi 1, che formerà un menu a discesa.

C'è un punto importante qui, ovvero che potrebbe non essere necessario rendere ogni elemento a discesa, ma solo alcuni. Nessun problema, quindi semplicemente non creiamo elenchi nidificati nei paragrafi senza abbandonarli.

In realtà, eccolo qui, tutto il markup:

Capisco che è enorme. Questo è il problema con gli elenchi annidati, che richiedono molto codice. Ma tieni presente che stiamo facendo 4 voci principali e per ognuna ci sarà un menu a tendina.

In realtà, ho impostato l'identificatore di navigazione per tutta la navigazione e la seconda classe di stile per tutti gli elenchi annidati, per capire che sono annidati.

Ottimo, il nostro markup è pronto, puoi guardare il risultato:

Sì, sembra terribile. Adesso però attiveremo i css e in pochi minuti la nostra navigazione si trasformerà. Andiamo a lavorare.

Scrivere stili css

La prima cosa che farò è ripristinare tutti i padding sui valori predefiniti per tutti gli elementi. Interferiranno solo con noi, è meglio impostare noi stessi i trattini, dove è necessario.

* (margine: 0; riempimento: 0;)

#nav (altezza: 70px;) #nav ul (stile elenco: nessuno;)

Ora dobbiamo effettivamente decidere quale sarà il nostro menu. Orizzontale o verticale? Propongo di fare prima l'orizzontale e vedere tutto sul suo esempio. Per fare ciò, è necessario scrivere i seguenti stili:

#nav> ul> li (float: sinistra; larghezza: 180 px; posizione: relativa;)

Nota che con il segno> ci riferiamo agli elementi in un elenco che è direttamente annidato in un ul e che uno è direttamente annidato in un nav. Questo è molto importante, in quanto consente di non applicare lo stile agli elementi negli elenchi nidificati. Il fatto è che, secondo la mia idea, gli elementi nell'elenco principale saranno disposti orizzontalmente e in quelli nidificati - verticalmente.

Ma, ovviamente, puoi farlo in modo diverso, secondo la tua idea. Puoi fare tutti gli articoli su una riga.

Comunque, il codice di cui sopra, spero che tu possa capire. Forza gli elementi nell'elenco principale a scorrere a sinistra, in modo che si adattino tutti alla stessa riga, anche se sono elementi di blocco. Ho anche dato loro una larghezza esplicita e un posizionamento relativo.

A cosa serve il posizionamento? E' necessario per poi posizionare in modo assoluto le liste annidate. Se hai studiato il posizionamento in css, probabilmente saprai che se imposti un posizionamento relativo di un blocco, tutti gli elementi in esso contenuti possono essere posizionati assolutamente all'interno di questo particolare blocco e non dell'intera finestra del browser.

Nel frattempo, ecco cosa abbiamo già:

Da questo screenshot, puoi già immaginare il risultato approssimativo. Naturalmente, dobbiamo ancora decorare bene i paragrafi in modo che gli occhi non chiedano pietà durante la visualizzazione della navigazione.

#nav li a (display: block; background: # 90DA93; border: 1px solid # 060A13; color: # 060A13; padding: 8px; text-align: center; text-decoration: nessuno;) #nav li a: hover ( sfondo: # 2F718E;)

Innanzitutto, i collegamenti stessi devono essere resi a blocchi. Ciò è necessario affinché il riempimento funzioni e tutte le proprietà vengano applicate correttamente. Successivamente, specifico i colori dello sfondo, il testo, i parametri della cornice, il riempimento e l'allineamento del testo al centro. Infine, rimuovi la sottolineatura dai link.

Tutti questi parametri non devono essere scritti come ho fatto io. Puoi scegliere i colori in modo arbitrario, rendere una cornice diversa o non usarla affatto, i rientri possono essere diminuiti o aumentati.

Nota che in questo caso non abbiamo usato il segno>, quindi queste regole si applicheranno a tutti i link, inclusi quelli nei paragrafi nidificati. Quindi, ora abbiamo quanto segue:

Ottimo, ma capisci che gli elementi secondari non dovrebbero essere visibili, dovrebbero aprirsi quando passi con il mouse sull'elemento desiderato. Senza di essa, il nostro menu sembra un tavolo. Bene, è ora di nascondere gli elementi nidificati.

#nav li .second (display: nessuno; posizione: assoluta; top: 100%;)

Innanzitutto, nascondiamo gli elenchi completamente nidificati. In secondo luogo, diamo loro il posizionamento assoluto e la coordinata superiore: 100%. Ciò significa che il menu a tendina verrà visualizzato chiaramente sotto l'elemento principale a cui appartiene, chiaramente al di sotto del 100% dell'altezza di quell'elemento.

Ora vediamo solo il menu principale della pagina web, che è ciò di cui abbiamo bisogno.

Implementare il drop out

Dobbiamo fare la cosa più importante: realizzare la perdita stessa. Non c'è niente di complicato, guarda questo codice:

#nav li: hover .second (display: block;)

Questo codice funzionerà perfettamente. Quando passi con il mouse su un elemento nel menu principale, l'elenco nidificato diventa visibile. E solo l'elenco incorporato nell'elemento su cui passa il cursore.

C'è solo un piccolo problema: la larghezza degli elementi nidificati non corrisponde alla larghezza di quelli principali. Ma questo si risolve molto facilmente aggiungendo gli stili appropriati:

#nav li li (larghezza: 180 px;)

Tutto, il problema è risolto:

Tutto funziona perfettamente. Quando passi con il mouse sull'elemento principale, viene visualizzato il menu a discesa corrispondente. Se sposti il ​​cursore di lato, scompare. Se sposti il ​​cursore sugli elementi nidificati stessi, puoi fare clic su di essi e andare alla sezione desiderata del sito. Pertanto, abbiamo creato con te un menu a discesa molto semplice e leggero senza assolutamente script.

Conversione del menu in verticale

Bene, bene, abbiamo risolto completamente con la navigazione orizzontale, ma oltre a ciò, la navigazione verticale è molto comune sui siti e può anche essere a discesa. In effetti, è molto facile cambiare il menu da orizzontale a verticale, basta cambiare un paio di righe di codice.

Per prima cosa, dovrai rimuovere il float: a sinistra dagli elementi dell'elenco principale. È questa proprietà che contribuisce al fatto che i nostri articoli vengono visualizzati su un'unica riga, ma perché ne abbiamo bisogno se la navigazione deve essere verticale?

Ora resta da cambiare le regole per il selettore #nav li .second, ovvero per gli elenchi annidati, ovvero devono essere posizionati in modo leggermente diverso. Come questo:

#nav li .second (display: nessuno; posizione: assoluta; sinistra: 100%; alto: 0;)

Cioè, è necessario registrare due coordinate invece di una. In primo luogo, nel caso della navigazione orizzontale, ho detto che, come previsto, le voci dei menu annidati dovrebbero essere visualizzate sotto le voci principali. Nel caso di un menu verticale, questo non è adatto: gli elementi dovrebbero essere visualizzati sul lato.

Quindi cambia in alto: 100% a sinistra: 100%. Inoltre, abbiamo anche bisogno della coordinata superiore. Lo impostiamo a 0 in modo che il sottomenu sia allo stesso livello della voce a cui corrisponde.

Tutto, ora tutto funziona come dovrebbe. Puoi testarlo. Come puoi vedere, non stavo mentendo quando ho detto che avrei dovuto riscrivere solo poche righe di codice.

Menu orizzontale con più livelli

Usando più o meno lo stesso approccio, puoi creare più livelli di menu se necessario. Ad esempio, creiamo una lista per la quarta voce del menu principale, che sarà annidata in una delle sottovoci.

Ciao cari lettori del mio blog! L'articolo di oggi sarà molto utile per i progettisti di layout alle prime armi. Da oggi creeremo con voi un semplice menu orizzontale. Prima di procedere direttamente al layout, voglio dire alcune parole sul motivo per cui ho deciso di scegliere questo particolare argomento per l'articolo.

In effetti è tutto abbastanza semplice, quando pensavo all'argomento della prossima lezione per il sito, ho iniziato a ricordare e ad analizzare la mia esperienza di studio del layout, quello che ho dovuto affrontare nella fase iniziale di diventare me stesso come layout designer, cosa per me molto incomprensibile quando studiavo quest'area ecc. Mi sono posto tutte queste domande per capire meglio cosa potrebbe interessare a una persona che inizia il suo percorso come layout designer. E per me personalmente, non appena ho iniziato a studiare il layout, sono sorte la maggior parte delle domande sul layout dei vari menu, soprattutto quando si tratta di menu multilivello. E così oggi parleremo del menu, e più precisamente del menu orizzontale. Quindi ci siamo!

Iniziamo l'impaginazione del nostro menù orizzontale!

Come probabilmente indovinerai, la prima cosa che dobbiamo fare è creare una pagina html con markup standard e collegarvi il foglio di stile. Non mi dilungherò in dettaglio su questo passaggio, poiché spero ancora che tu non sia abbastanza principiante per dirti in dettaglio cosa sono il corpo e la testa e come sono collegati gli stili. Dirò solo che oltre agli stili per il nostro menu, scriverò il ripristino più semplice nel file css per ripristinare gli stili e ottenere lo stesso rientro in tutti i browser. Ecco come appare il mio reset più semplice:

Non dirò nulla in dettaglio nemmeno sul ripristino degli stili, poiché in realtà questo è un argomento per un altro articolo, l'unica cosa che devi sapere sul codice sopra è che grazie a questo codice, tutti gli elementi della pagina che scriveremo avranno i margini e i margini vengono reimpostati a zero.padding, questo deve essere fatto affinché la nostra pagina appaia uguale in tutti i browser.

Quindi cosa abbiamo in questa fase? Abbiamo una pagina html con markup standard:

E abbiamo un foglio di stile collegato a questa pagina (il mio è style.css), con il seguente contenuto:

Il prossimo passo è creare il markup html per il nostro menu.

Come creare il markup per il menu

Nel nostro markup useremo un nuovo tag