Come creare un menu CSS orizzontale. Conversione del menu in verticale

HTML5 IE Cr Op Sa Fx

Centrare un menu orizzontale può essere un compito complicato, specialmente per chi non conosce i CSS. Trovare soluzioni porta a un elenco molto limitato di metodi, la maggior parte dei quali si basa su CSS, trucchi JavaScript o sull'uso di regole non standard che non sono supportate da tutti i browser. In questo tutorial, ti guideremo attraverso il metodo per centrare un menu orizzontale, che utilizza solo regole CSS standard e funziona in tutti i browser.

Un esempio di menu centrato

Di seguito è riportato un menu orizzontale centrato in questa colonna, in cui è attivata la seconda scheda. Puoi provare a ridimensionare la finestra o la pagina del browser per assicurarti che il menu rimanga sempre centrato e reattivo.

Nella pagina demo, puoi vedere diverse opzioni di design per un menu centrato orizzontalmente. Ognuno di loro può essere utilizzato nei tuoi progetti.

markup HTML

Tutti i menu mostrati in questa lezione utilizzano una struttura semplice. Questo è un normale elenco non ordinato di collegamenti inseriti in un elemento div.

Menu centrato Codice CSS

Di seguito è riportato il CSS completo che centrerà il menu. E le spiegazioni del principio di lavoro sono fornite più avanti nella lezione.

#centeredmenu (float: sinistra; larghezza: 100%; sfondo: #fff; border-bottom: 4px solido # 000; overflow: nascosto; posizione: relativa;) #centeredmenu ul (clear: sinistra; float: sinistra; stile elenco : nessuno; margin: 0; padding: 0; position: relative; left: 50%; text-align: center;) #centeredmenu ul li (display: block; float: left; list-style: nessuno; margin: 0; padding: 0; position: relative; right: 50%;) #centeredmenu ul li a (display: block; margin: 0 0 0 1px; padding: 3px 10px; background: #ddd; color: # 000; text-decoration: none; line-height: 1.3em;) #centeredmenu ul li a: hover (background: # 369; color: #fff;) #centeredmenu ul li a.active, #centeredmenu ul li a.active: hover (color: # fff; background: # 000; font-weight: grassetto;)

Come funziona il metodo di centratura

Il metodo si basa sul posizionamento relativo di elementi di blocco flottante l'uno nell'altro. Innanzitutto, vediamo come vengono ridimensionati gli elementi quando vengono spostati.

Elemento div(blocco), senza offset, si estende per tutta la larghezza a sua disposizione.

Ma se spostiamo l'elemento div a sinistra, si ridurrà automaticamente per adattarsi al suo contenuto. La compressione è la chiave per implementare questo metodo per centrare i menu. Aiuta a spostare il menu nella posizione corretta.

Menu standard allineato a sinistra

Prendiamo un menu standard allineato a sinistra e riprogettarlo passo dopo passo. Per chiarezza, gli articoli sono colorati in diversi colori, quindi è subito chiaro cosa si investe dove.

Prestare attenzione ai seguenti punti:

• Elemento menu centrato div(rettangolo blu) è spostato a sinistra, ma è largo al 100%, quindi rimane allungato per riempire l'intera pagina.
• Elemento ul(rettangolo rosa) è all'interno dell'elemento menucentrato div e si sposta a sinistra. Ciò significa che verrà ridotto alla larghezza del suo contenuto, ovvero alla larghezza totale di tutti i segnalibri.
• Tutti gli elementi li (rettangoli verdi) sono all'interno dell'elemento ul e spostati a sinistra. Pertanto, si riducono alla dimensione dei collegamenti in essi contenuti e si allineano in una linea orizzontale.
• All'interno di ogni collegamento (rettangoli arancioni) viene visualizzato il testo del segnalibro: Segnalibro 1, Segnalibro 2 e così via.

Spostamento della posizione dell'elenco non ordinato

Quindi sfalsiamo l'elemento ul a destra del 50% utilizzando la posizione: relativa; ... Quando un elemento è compensato di una percentuale in queste condizioni, è importante ricordare che la larghezza totale degli elementi che contiene non è la sua larghezza. Nel nostro caso, l'offset avviene per metà della finestra del browser (o dello spazio disponibile per la visualizzazione), di conseguenza il nostro menu inizia al centro della finestra e si estende parzialmente al di fuori di essa. E vai al passaggio successivo.

Spostare la posizione di tutte le voci di menu

Resta solo da spostare tutti gli elementi li lasciato del 50%. Questo è il 50% della larghezza del nostro elemento ul (il contenitore che contiene il menu). Pertanto, le schede vengono spostate esattamente al centro della finestra.

Alcune note importanti

Ci sono diversi punti importanti da tenere a mente quando si utilizza questo metodo di centraggio:

• Poiché l'elemento ul si estende parzialmente all'esterno della finestra, questo porta alla visualizzazione delle barre di scorrimento. Pertanto, è necessario utilizzare l'overflow: regola nascosta; per elemento menu centrato div... Quindi, la parte sporgente dell'elemento div sarà tagliato.
• Poiché l'elemento ul non è allineato ai segnalibri, non è possibile utilizzare alcuno stile di visualizzazione per esso. Lascia l'elemento ul senza colore di sfondo e senza bordo in modo che sia completamente invisibile. E gli stili per i segnalibri dovrebbero essere usati solo per gli elementi. li.
• Se devi impostare stili speciali per il primo e l'ultimo segnalibro, devi aggiungere una classe per il primo e l'ultimo elemento. li in modo da poterli modellare individualmente.

Conclusione

La soluzione proposta è compatibile con tutti i browser, non utilizza JavaScript e supporta il testo ridimensionabile.

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, allora 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 arbitrariamente, 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.