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 loro margini e i loro margini vengono reimpostati a zero.padding, questo deve essere fatto affinché la nostra pagina appaia la stessa 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
E poiché abbiamo già iniziato a parlare del supporto per i nuovi tag html 5, in modo da non avere problemi con questo nei vecchi browser, dobbiamo collegare una libreria speciale al nostro documento - html5shiv. Questo viene fatto inserendo in
la sezione principale della tua pagina con il seguente codice:
Tutto dopo questo tag
Torniamo direttamente al nostro markup. Successivamente, abbiamo bisogno nel nostro tag
Quindi con il markup, sembra che abbiamo finito, è ora di iniziare a scrivere direttamente gli stili, poiché ora il nostro menu non sembra molto buono, per usare un eufemismo:
Stili di scrittura per il nostro menu orizzontale
E quindi, prima di tutto, quando disponi il menu, dobbiamo rimuovere i marcatori di elenco, ovviamente non ne abbiamo bisogno, è fatto in questo modo:
Ul (stile elenco: nessuno;)
Dopodiché, il nostro menu diventerà così:
Non mi piace molto che il nostro menu sia appiccicoso ai bordi del browser, risolviamolo:
Con questo codice, abbiamo impostato la larghezza del nostro menu, gli abbiamo dato 50px di margine superiore e inferiore e lo abbiamo posizionato al centro. Chi non sa se un elemento block ha una larghezza, allora per posizionare questo elemento rigorosamente al centro, basta impostargli un margine esterno (margine) a destra ea sinistra con il valore auto.
Il prossimo passo è quello di rendere finalmente orizzontale il nostro menu, questo viene fatto impostando gli elementi
Menu li (fluttuante: a sinistra;)
Tutto ora il nostro menu è diventato orizzontale.
Se non capisci cosa è successo esattamente e cosa fa la proprietà float, ti consiglio di cercare su Google le informazioni su questa proprietà e studiarla a fondo, poiché
Non una singola pagina di layout è completa senza di essa, te lo dico per certo. Bene, ok, continuiamo!
Menu li а (display: block; / * Rendere il collegamento un elemento di blocco * / padding: 12px 20px; / * Impostazione del padding interno * / text-decoration: none; / * rimuovendo la sottolineatura * / color: #fff; / * rendere i collegamenti di colore bianchi * / background: # 444; / * rendere scuro il colore di sfondo * / font: 14px Verdana, sans-serif; / * impostare la dimensione e il nome del carattere * /)
Una delle regole più importanti qui è display: block ;. Il fatto è che, per impostazione predefinita, i collegamenti sono elementi in linea e il rientro viene applicato agli elementi in linea in modo diverso nei diversi browser, quindi è consigliabile rendere il collegamento un elemento di blocco e solo successivamente applicare le proprietà relative al rientro esterno o interno ad esso. Ora non voglio caricarti di informazioni inutili nel tempo, usando esempi reali, capirai tu stesso perché qui viene data una tale enfasi.
Vediamo cosa è successo, aggiorna la pagina del browser e tadam!:
Come vedete non sembra male, possiamo dire che, in linea di massima, il nostro menù è pronto. L'unica cosa che deve ancora essere fatta è impostare la luce del collegamento al passaggio del mouse, beh, penso anche che il menu avrà un aspetto migliore con i separatori tra gli elementi.
Iniziamo con i delimitatori:
Menu li (border-left: 1px solid # 666;) .menu li: first-child (border-left: nessuno;)
Cosa abbiamo fatto qui? Sì, è tutto molto semplice che impostiamo per i nostri punti (
Ancora una volta, vediamo cosa abbiamo ottenuto:
Secondo me, con i delimitatori è molto meglio.
Menu li a: hover (sfondo: # 888;)
Usando ancora una speciale pseudo-classe, questa volta - hover, impostiamo il colore del collegamento quando il cursore viene posizionato su di esso, guarda:
Secondo me, figo 🙂, spero che tu abbia lo stesso menu del mio.
Su questo finirò questa lezione, spero davvero che ti sia stata utile e ora lo sai come scrivere un semplice menu orizzontale in puro html e css... Certo, abbiamo disposto un menu a livello singolo, sarà un po 'più difficile con un menu a due livelli (con un elenco nidificato), ma questo è già un argomento per un'altra lezione, per me è tutto. Torna di nuovo, sarò felice !!!
Habr, ciao!
Molte buone soluzioni di diversi specialisti appaiono su Codepen e credo che le migliori dovrebbero essere raccolte in un unico posto. Pertanto, 2 anni fa ho iniziato a salvare script interessanti su vari argomenti sul mio computer.
Li pubblicavo nel gruppo di prodotti cloud IDE mr. Gefest, questi erano assemblaggi di 5-8 soluzioni. Ma ora ho iniziato ad accumulare 15-30 script in diversi argomenti (pulsanti, menu, suggerimenti e così via).
Set così grandi dovrebbero essere mostrati a più professionisti. Pertanto, li pubblico su Habr. Spero ti saranno utili.
In questa recensione, daremo un'occhiata ai menu a strati.
Navigazione orizzontale piatta
Bella barra di navigazione con sottomenu che appaiono senza intoppi. Il codice è ben strutturato, viene utilizzato js. A giudicare dalle caratteristiche utilizzate, funziona in ie8+.
http://codepen.io/andytran/pen/kmAEy
Intestazione di navigazione materiale con menu a discesa allineati
Barra di collegamento reattiva con sottomenu a due colonne. Tutto è fatto in css e html. Selettori CSS3 applicati che non sono supportati in ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Menu a discesa Smooth Accordion
Menu verticale elegante con elementi a discesa fluidi. Transizione, trasformazione js-code viene utilizzato.
http://codepen.io/fainder/pen/AydHJ
Menu di navigazione in linea scuro puro CSS
Barra di navigazione verticale scura con icone da ionicons. Javascript è applicato. In ie8, molto probabilmente funzionerà senza animazione.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega menu a discesa con animazione
Menu elegante con due formati di output: orizzontale e verticale. Vengono utilizzate icone e animazioni CSS3. In ie8 sembrerà sicuramente orribile, ma in altri browser tutto è fantastico.
Collegamento verticale: http://codepen.io/rizky_k_r/full/sqcAn/
Collegamento orizzontale: http://codepen.io/rizky_k_r/pen/xFjqs
Menu a discesa CSS3
Un menu orizzontale con elementi di grandi dimensioni e un elenco a discesa di collegamenti. Codice pulito e minimalista senza js.
http://codepen.io/ojbravo/pen/tIacg
Semplice menu a discesa CSS puro
Menu orizzontale semplice ma elegante. Usato da font-awesome. Tutto funziona in css e html, no js. In ie8 funzionerà.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega menu a discesa
Un'ottima soluzione per i negozi online. Visualizza più livelli di categorie e immagini di grandi dimensioni (ad esempio, articoli in stock). Si basa su boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Navigazione piatta
Elegante barra di navigazione con sottomenu fluidi. Verrà visualizzato con problemi nei browser meno recenti.
http://codepen.io/andytran/pen/YPvQQN
Navigazione nidificata 3D
Menu orizzontale con animazioni molto interessanti senza js!
http://codepen.io/devilishalchemist/pen/wBGVor
Mega menu reattivo - Navigazione
Menu reattivo orizzontale. Sembra buono, ma la versione mobile è un po' zoppa. Usato css, html e js.
http://codepen.io/samiralley/pen/xvFdc
Menu Css3 puro
Menù originale. Con codice semplice e pulito senza js. Utilizzare per effetti wow.
http://codepen.io/Sonick/pen/xJagi
Menu a discesa CSS3 completo
Un menu a discesa colorato con un livello di nidificazione. Vengono utilizzate le icone di font-awesome, html e css.
http://codepen.io/daniesy/pen/pfxFi
Solo CSS3 menu a tendina
Abbastanza un buon menu orizzontale con tre livelli di nidificazione. Funziona senza js.
http://codepen.io/riogrande/pen/ahBrb
Menu a tendina
Un menu minimalista con l'effetto originale dell'aspetto di un elenco nidificato di elementi. Sono contento che questa soluzione sia anche senza javascript.
http://codepen.io/kkrueger/pen/qfoLa
Menu a discesa CSS puro
Una soluzione primitiva ma efficace. Solo css e html.
http://codepen.io/andornagy/pen/xhiJH
Menu pull - Concetto di interazione menu
Un concetto interessante di un menu per un telefono cellulare. Non l'ho mai visto prima. Utilizzato html, css e javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Rendi semplice il menu a discesa
Codice pulito e semplice, niente js. In ie8 funzionerà sicuramente.
http://codepen.io/nyekrip/pen/pJoYgb
Menu a discesa CSS puro
Non è una cattiva soluzione, ma ci sono troppe classi utilizzate. Sono contento che non ci sia js.
http://codepen.io/jonathlee/pen/mJMzgR
Menu a discesa
Bel menu verticale con codice javascript minimo. JQuery non viene utilizzato!
http://codepen.io/MeredithU/pen/GAinq
Menu a discesa CSS 3
Un menu orizzontale con didascalie aggiuntive può decorare bene il tuo sito. Il codice è semplice e diretto. Javascript non si applica.
http://codepen.io/ibeeback/pen/qdEZjR
Bella soluzione con molto codice (html, css e js). Sono stati inventati 3 formati di sottomenu. La soluzione è adatta per i negozi online.
http://codepen.io/martinridgway/pen/KVdKQJ
Menu a discesa CSS3 (soluzione speciale)!
Menu orizzontale scuro con tredici (13) opzioni di animazione! Vi consiglio sicuramente di leggerlo, tornerà utile nella vita di tutti i giorni.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Spero che ti sia piaciuto l'assemblaggio di 23 soluzioni. Se vuoi leggerli ulteriormente, passa attraverso il sondaggio qui sotto.
Godetevi il vostro lavoro, a tutti.
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.
1. Menu jQuery verticale luminoso
2. Effetto fresco. Menù danzante.
4. Elenco a discesa utilizzando jQuery
Ottimo stile dell'elemento dell'interfaccia utente come menu a discesa.
Quando passi il mouse sul pulsante, il pannello scorre dall'alto.
6. Plugin jQuery "MobilyBlocks" per la visualizzazione del menu radiale
7. Menu usando gli sprite
Menu javascript animato con effetto bagliore.
Menu jQuery fresco e carino.
9. Menu jQuery GarageDoor
10.jQuery menu a scorrimento verticale
Implementazione di un menu con un gran numero di voci. Scorre quando si sposta il cursore del mouse in alto o in basso.
11.jQuery stile a discesa
12. Plugin di navigazione della pagina
Scorrimento fluido fino alla sezione desiderata della pagina. Plugin "jQuery One Page Navigation".
13. Plugin "Menu contenuto animato"
Nuovo plugin jQuery. Ottima implementazione della navigazione animata del sito. Quando si passa attraverso le voci del menu, viene visualizzato un blocco con una descrizione e possibili collegamenti e, a seconda dell'elemento selezionato, cambia lo sfondo della pagina, che si estende a schermo intero indipendentemente dalle dimensioni della finestra del browser. Assicurati di dare un'occhiata alla pagina demo.
14. Plugin jQuery Sweet Menu
Menu animato con elementi in movimento.
15. Menu jQuery fisso
Scorrendo la pagina verso il basso, il menu rimane fisso nella parte superiore dello schermo.
16. Menu a scorrimento del kit di scorrimento
Per implementare un menu verticale con un gran numero di voci. Lo scorrimento delle voci viene effettuato utilizzando la rotellina del mouse, oppure utilizzando i link "Precedente" e "Avanti".
17. Menu CSS3 elegante
18. Nuovo menu stile Apple CSS3
Nuovo menu in stile Apple. Sembra più scuro di prima, ma non per questo meno carino.
19. Menu jQuery originale
Menu a tendina con effetto di sfondo. Le voci del sottomenu si espandono verso l'alto. Quando passi con il mouse su una voce di menu, l'immagine di sfondo cambia.
20. Menu jQuery animato
Menù animato. Le voci di menu sono presentate sotto forma di icone e descrizioni. alcuni grandi effetti sul passaggio del mouse su una voce di menu. Ci sono 8 effetti, per vederli tutti - segui i link Exemple1-Exemple8 nella pagina demo.
21. Menu a scorrimento XML "Menu a scorrimento"
Menu a scorrimento verticale e orizzontale. Una buona soluzione quando ci sono molte voci nel menu.
22. Menu contestuale sul sito su jQuery
Quando fai clic con il pulsante destro del mouse su un'area specifica, viene visualizzato un menu.
23. Un menu circolare a due livelli per il sito
Quando viene selezionata una voce di menu, le voci di sottomenu vengono visualizzate a destra.
24. Menu CSS3 jQuery con menu Sfocatura CSS3
Il menu CSS3 di jQuery originale è disponibile in 7 stili diversi. Quando passi il cursore del mouse su una delle voci di menu, il resto è sfocato, per così dire.
25. Diversi spettacolari menu jQuery CSS3 animati
10 menu animati creativi. Menu CSS3 orizzontali e verticali con vari effetti e transizioni.
L'archivio include anche il file PSD originale del menu.
27. Menu MagicLine
Lo sfondo o la sottolineatura di una voce di menu segue il mouse con un leggero ritardo, mentre lo sfondo cambia gradualmente colore man mano che ci si sposta da una voce all'altra. Un effetto molto bello, sembra insolito. Attenzione: l'effetto non funziona in opera
28. Bolle di immagine
Grande effetto quando si passa il mouse su una delle immagini. L'effetto è in qualche modo simile al jQDock descritto sopra.
31. Interessanti menu jQuery con diversi effetti
Menu orizzontale, verticale. Effetti interessanti.
32. Ottimo menu in stile Apple jQuery
34. Menu jQuery con effetti interessanti
36. Menu fresco con interessante effetto jQuery
Un effetto molto interessante. Perfetto per i siti portfolio.
Interessante effetto delle miniature pop-up al passaggio del mouse.
40. Elenco a discesa con scorrimento automatico
Bello l'effetto di transizione tra i paragrafi.
42. Ottimo menu jQuery
43. Bel menu jQuery grande
44. Scorrimento dei menu jQuery
Le voci di menu sono presentate come miniature.
46. Menu radiale di navigazione jQuery
47 menu CSS e jQuery
Una barra di navigazione con una casella di ricerca che diventa semitrasparente mentre scorri la pagina.
48. Menu jQuery orizzontale
49. Menu jQuery verticale
Ottimo menu verticale. Quando si posiziona il cursore, viene visualizzata una voce di menu.
50. Menu jQuery orizzontale
Effetto interessante quando si passa con il mouse su una voce di menu.
52. Menu a discesa jQuery
Quando passi il cursore del mouse sul menu, appariranno i suoi elementi. Gli elementi che appaiono vengono visualizzati come un arco, il cui raggio può essere impostato durante la configurazione del plug-in. In alcuni browser non vedrai la visualizzazione dell'arco, il menu verrà visualizzato direttamente, ma ciò non rovinerà l'impressione generale di questa implementazione del menu jQuery.
53 Barra di navigazione CSS e jQuery
Effetto interessante quando si passa il cursore del mouse su una voce di menu.
54. Pannello popup jQuery
Menu animato fresco in scala di grigi.
58. Navigazione del sito a colonne con jQuery
Una soluzione interessante per la navigazione, che si presenta sotto forma di barre verticali. Quando si posiziona il cursore del mouse su queste strisce, vengono visualizzati un'immagine per l'elemento e un elenco di sottomenu. Quando si fa clic su una voce del sottomenu, viene visualizzata una pagina di descrizione. Questa implementazione è perfetta per siti promozionali o presentazioni. Assicurati di controllare la demo del plugin.
59 jQuery navigazione nel sito
La navigazione del sito si presenta sotto forma di 4 immagini, quando passi il mouse sopra le quali noterai un interessante effetto animato.
60. La barra di navigazione scorre con il contenuto
Barra di navigazione. Cliccando sulla freccia si scorre la pagina. La navigazione scorre insieme al contenuto della pagina.
61. Pannello jQuery con vari servizi sociali
62. Menu jQuery animato pulito
63. Menu Pennelli Acquerelli jQuery
La maggior parte dei siti classici su Internet utilizza un menu orizzontale come principale elemento di navigazione. A volte può contenere varie funzionalità aggiuntive: strutture multilivello, icone per elementi secondari, un blocco di ricerca, elenchi complessi, ecc. Di recente, il blog ha già avuto una piccola raccolta, e oggi vedremo 4 esempi pratici di come creare un menu a discesa in CSS + HTML. Le informazioni sono utili per gli sviluppatori alle prime armi e per coloro che desiderano modificare la navigazione sul proprio sito.
Il primo tutorial del menu a discesa CSS3 è il più recente di questa raccolta (per aprile 2016). Pro della soluzione: questo menu a tendina orizzontale per il sito contiene icone in sottovoci, l'implementazione e il codice CSS stesso sono abbastanza semplici da capire e implementare.
Passaggio 1: markup HTML
Il primo passo è creare un elenco non ordinato in HTML con collegamenti di ancoraggio (#) per i suoi elementi. Lì, in uno degli elementi, aggiungi un altro elenco nidificato, che sarà responsabile del sottomenu.
Passaggio 2: visualizzare il menu
Rimuovi il riempimento CSS non necessario per gli elementi del menu a discesa orizzontale del sito. Allo stesso tempo, imposteremo una larghezza e un'altezza fisse delle voci di menu, oltre ad aggiungere angoli arrotondati.
| .menu, .menu ul, .menu li, .menu a (margine: 0; padding: 0; bordo: nessuno; contorno: nessuno;) .menu (altezza: 40px; larghezza: 505px; sfondo: # 4c4e5a; sfondo: -webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -o-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (posizione: relativa; stile elenco: nessuno; float: sinistra; display: blocco; altezza: 40px;) |
Menu, .menu ul, .menu li, .menu a (margine: 0; padding: 0; bordo: nessuno; contorno: nessuno;) .menu (altezza: 40px; larghezza: 505px; sfondo: # 4c4e5a; sfondo: - webkit-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -moz-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: -o-linear-gradient ( top, # 4c4e5a 0%, # 2c2d33 100%); background: -ms-linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); background: linear-gradient (top, # 4c4e5a 0%, # 2c2d33 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;) .menu li (posizione: relativa; stile elenco: nessuno; float: sinistra; display: blocco ; altezza: 40px ;)
Passaggio 3: progettazione del collegamento
Oltre alle caratteristiche di stile di base (carattere, colore, altezza), utilizziamo e creiamo una transizione graduale del colore del testo al passaggio del mouse. Aggiungiamo anche dei separatori al menu, rimuovendo il bordo dal primo elemento a sinistra e dall'ultimo a destra.
| .menu li a (display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: nessuno; border-left: 1px solid # 393942; border-right: 1px solid # 4f5058; font -family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: # f3f3f3; text-shadow: 1px 1px 1px rgba (0, 0, 0, .6); -webkit- transizione: facilità di entrata e uscita colore .2s; -moz-transition: facilità di entrata e uscita colore .2s; -o-transition: facilità di entrata e uscita colore .2s; -ms-transition: facilità di entrata e uscita colore .2s; -out;transizione: colore .2s easy-in-out;) .menu li: primo figlio a (bordo sinistro: nessuno;) .menu li: ultimo figlio a (bordo destro: nessuno;) .menu li : hover> a (color: # 8fde62;) |
Menu li a (display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: nessuno; border-left: 1px solid # 393942; border-right: 1px solid # 4f5058; font- famiglia: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: # f3f3f3; text-shadow: 1px 1px 1px rgba (0,0,0, .6); -webkit-transition : color .2s facilita l'entrata in uscita; -moz-transition: color .2s facilita l'entrata in uscita; -o-transition: color .2s facilita l'entrata in uscita; -ms-transition: color .2s facilita l'entrata- out;transition: color .2s easy-in-out;) .menu li: primo figlio a (bordo sinistro: nessuno;) .menu li: ultimo figlio a (bordo destro: nessuno;) .menu li: passa il mouse> a (colore: # 8fde62;)
Step4 - sottomenu
Poiché abbiamo un menu a discesa del sito su CSS, dovremmo anche impostare l'aspetto dell'elenco annidato. Innanzitutto, imposta il padding su 40 px dall'alto e 0 px a sinistra + aggiungi angoli arrotondati. Per mostrare/nascondere il sottomenu, inizialmente impostiamo la proprietà di opacità su zero e, al passaggio del mouse, su uno. Per creare l'effetto dell'aspetto di un sottomenu, imposta l'altezza dell'elenco a zero e con hover = 36px.
| .menu ul (posizione: assoluta; alto: 40px; sinistra: 0; opacità: 0; sfondo: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; bordo -radius: 0 0 5px 5px; -webkit-transition: opacità .25s facilità .1s; -moz-transition: opacità .25s facilità .1s; -o-transition: opacità .25s facilità .1s; -ms-transition: opacità .25s easy .1s;transizione: opacità .25s easy .1s;) .menu li: hover> ul (opacità: 1;) .menu ul li (altezza: 0; overflow: nascosto; padding: 0; -webkit-transition : altezza .25s andamento .1s; -moz-transition: altezza .25s andamento .1s; -o-transition: altezza .25s andamento .1s; -ms-transition: altezza .25s andamento .1s; transizione: altezza .25s andamento .1s;) .menu li: hover> ul li (altezza: 36px; overflow: visibile; padding: 0;) |
Menu ul (posizione: assoluta; alto: 40px; sinistra: 0; opacità: 0; sfondo: # 1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border- raggio: 0 0 5px 5px; -webkit-transition: opacità .25s facilità .1s; -moz-transition: opacità .25s facilità .1s; -o-transition: opacità .25s facilità .1s; -ms-transition: opacità. 25s facilità .1s; transizione: opacità .25s facilità .1s;) .menu li: hover> ul (opacità: 1;) .menu ul li (altezza: 0; overflow: nascosto; padding: 0; -webkit-transition: altezza .25s andamento .1s; -moz-transition: altezza .25s andamento .1s; -o-transition: altezza .25s andamento .1s; -ms-transition: altezza .25s andamento .1s; transizione: altezza .25s andamento. 1s;) .menu li: hover> ul li (altezza: 36px; overflow: visibile; padding: 0;)
Impostiamo la larghezza dei collegamenti = 100px, nella parte inferiore di tutti gli elementi tranne l'ultimo viene aggiunto un bordo inferiore. Inoltre, se lo desideri, puoi inserire immagini per le voci del sottomenu (attenzione! Non dimenticare di cambiare i percorsi delle immagini nel codice con quelli che usi).
| .menu ul li a (larghezza: 100px; padding: 4px 0 4px 40px; margin: 0; border: nessuno; border-bottom: 1px solid # 353539;) .menu ul li: last-child a (border: nessuno;) .menu a.documents (sfondo: url (../img/docs.png) no-repeat 6px center;) .menu a.messages (sfondo: url (../img/bubble.png) no-repeat 6px center ;) .menu a.signout (sfondo: url (../img/arrow.png) no-repeat 6px center;) |
Menu ul li a (larghezza: 100px; padding: 4px 0 4px 40px; margin: 0; border: nessuno; border-bottom: 1px solid # 353539;) .menu ul li: last-child a (border: nessuno;). menu a.documents (sfondo: url (../img/docs.png) no-repeat 6px center;) .menu a.messages (sfondo: url (../img / bubble.png) no-repeat 6px center; ) .menu a.signout (sfondo: url (../ img / arrow.png) no-repeat 6px center;)
Personalmente mi piace la facilità di implementazione e l'uso delle icone. Ecco il codice finale con codepen:
La versione di Josh Riser è visivamente simile al precedente menu a discesa in HTML e CSS. Non c'è un selettore figlio ">" nel codice (utile nei costrutti multilivello), ma l'autore fa buon uso degli effetti CSS3 (transizione, box-shadow e text-shadow) per un risultato migliore. Secondo il link nella fonte, non esiste una descrizione del processo di creazione di un menu a discesa orizzontale, quindi fornirò immediatamente il codice finale:
In questo esempio vedremo come creare un menu a tendina in CSS, in cui, oltre agli elementi, sarà presente un blocco di ricerca. Un'implementazione simile si trova spesso in quelle moderne. In termini di tempi e complessità di implementazione, la soluzione è leggermente più complicata delle precedenti. È stato pubblicato a maggio 2013, quindi potrebbe essere necessario modificare alcune cose, anche se ha funzionato alla grande nei nostri test.
codice HTML
Per la navigazione, come sempre, viene utilizzato un elenco non ordinato (con la classe nav). Le voci di menu regolari sono voci di elenco (li) e contengono collegamenti (a href) senza classi e ID. L'eccezione sono i 3 elementi specializzati di questo menu a discesa orizzontale con i seguenti ID:
- impostazioni - collegamento immagine;
- ricerca - un blocco con una ricerca e un pulsante corrispondente;
- options - contiene un sottomenu (implementato tramite un elenco con la classe subnav).
Inoltre nel codice vedrai uno script senza prefissi per l'utilizzo delle proprietà CSS senza prefissi. L'HTML finale per il menu a discesa ha il seguente aspetto:
|
-
- Applicazione
- Tavola
- Opzioni
CSS per il menu
1. Stili di base ed elementi di menu
Innanzitutto, specifichiamo il carattere Montserrat, uno sfondo grigio scuro e un'altezza fissa per le voci di menu. Tutti gli elementi sono allineati float: left e posizionati relativi in modo da poter aggiungere successivamente un sottomenu con position: absolute;
| @import url (http: //fonts.googleapis .com/css? family = Montserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: nessuno; position: relative; ) |
@import url (http://fonts.googleapis.com/css?family=Monserrat); * (margin: 0; padding: 0;) .nav (background: # 232323; height: 60px; display: inline-block;) .nav li (float: left; list-style-type: nessuno; position: relative; )
2. Progettazione del collegamento
La skin di base + viene applicata alle voci di menu. L'altezza è la stessa della classe nav. Per le #impostazioni dell'immagine-collegamento all'inizio del menu, l'allineamento è impostato.
| .nav li a (font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: nessuno; border-left: 1px solid # 2e2e2e; font-family: Montserrat , sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0.5);) .nav li a: hover (background-color: # 2e2e2e;) #settings a (padding: 18px; height: 24px ; dimensione del carattere: 10 px; altezza della linea: 24 px;) |
Nav li a (font-size: 16px; color: white; display: block; line-height: 60px; padding: 0 26px; text-decoration: nessuno; border-left: 1px solid # 2e2e2e; font-family: Montserrat, sans-serif; text-shadow: 0 0 1px rgba (255, 255, 255, 0.5);) .nav li a: hover (background-color: # 2e2e2e;) #settings a (padding: 18px; height: 24px; dimensione del carattere: 10px; altezza della linea: 24px;)
3. Blocco di ricerca
Questo elemento ha una larghezza fissa ed è composto da più parti: un campo di input (#search_text) con uno sfondo verde e un pulsante di ricerca (#search_button). In alcuni browser, il colore di sfondo potrebbe essere grigio.
| #search (larghezza: 357px; margine: 4px;) #search_text (larghezza: 297px; padding: 15px 0 15px 20px; dimensione del carattere: 16px; famiglia di caratteri: Montserrat, sans-serif; bordo: 0 nessuno; altezza: 52px ; margin-right: 0; color: white; outline: nessuno; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: -webkit-input-placeholder (/ * Browser WebKit * / color: white;): -moz-placeholder (/ * Mozilla Firefox da 4 a 18 * / color: white;) :: -moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (background: rgb (64, 151, 119);) #search_button (bordo: 0 nessuno; sfondo: # 1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;) |
#search (larghezza: 357px; margine: 4px;) #search_text (larghezza: 297px; padding: 15px 0 15px 20px; dimensione del carattere: 16px; famiglia di caratteri: Montserrat, sans-serif; bordo: 0 nessuno; altezza: 52px ; margin-right: 0; color: white; outline: nessuno; background: # 1f7f5c; float: left; box-sizing: border-box; transition: all 0.15s;) :: - webkit-input-placeholder (/ * Browser WebKit * / color: white;): -moz-placeholder (/ * Mozilla Firefox da 4 a 18 * / color: white;) :: - moz-placeholder (/ * Mozilla Firefox 19+ * / color: white;): -ms-input-placeholder (/ * Internet Explorer 10+ * / color: white;) #search_text: focus (background: rgb (64, 151, 119);) #search_button (bordo: 0 nessuno; sfondo: # 1f7f5c url (search.png) center no-repeat; width: 60px; float: left; padding: 0; text-align: center; height: 52px; cursor: pointer;)
4. Sottomenu a discesa
Il tocco finale ci permetterà di creare un menu a discesa in CSS che si attivi per l'ultimo elemento #opzioni.
| #options a (border-left: 0 nessuno;) #options> a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (visibilità: nascosta; posizione: assoluta; alto: 110%; destra: 0; larghezza: 200 px; altezza: auto; opacità: 0; transizione: tutti 0.1s; sfondo: # 232323;) .subnav li (float : none;) .subnav li a (bordo-basso: 1px solido # 2e2e2e;) #opzioni: hover .subnav (visibilità: visibile; alto: 100%; opacità: 1;) |
#options a (border-left: 0 nessuno;) #options> a (background-image: url (triangle.png); background-position: 85% center; background-repeat: no-repeat; padding-right: 42px; ) .subnav (visibilità: nascosta; posizione: assoluta; alto: 110%; destra: 0; larghezza: 200 px; altezza: auto; opacità: 0; transizione: tutti 0.1s; sfondo: # 232323;) .subnav li (float : none;) .subnav li a (bordo-basso: 1px solido # 2e2e2e;) #opzioni: hover .subnav (visibilità: visibile; alto: 100%; opacità: 1;)
Negli stili troverai un inserto di un'immagine di sfondo a triangolo (triangle.png) per indicare un sottomenu - non dimenticare di specificare il percorso corretto per questa e altre immagini nell'esempio. L'aspetto di un sottomenu viene implementato utilizzando la proprietà opacità. Soluzione finale su codepen:
Questa versione utilizza principalmente tecniche CSS2.1, più o meno una nuova soluzione - per marzo 2015. Se manca un sottolivello nel menu a discesa orizzontale per il sito, questo esempio ne contiene tre contemporaneamente. Con l'aiuto della pseudo-classe: figlio unico, alle voci viene aggiunto un simbolo "+" per indicare la presenza di sottomenu.
In generale, un buon esempio semplice. Non descriveremo in dettaglio il processo di implementazione, poiché è simile ai precedenti: prima crei un wireframe HTML, quindi aggiungi gradualmente gli stili per esso. Scarica il codice finale dal link alla fonte, puoi vederlo parzialmente nel Codepen:
Totale
Sopra, abbiamo esaminato 4 opzioni per creare un menu a discesa in CSS + HTML per, sebbene ci siano molti altri esempi simili in rete. Esistono soluzioni con jQuery, ma molto probabilmente è utile solo per l'implementazione di alcuni effetti speciali e attività non standard. Nella maggior parte dei casi, sarà sufficiente un sacco di CSS + HTML, soprattutto perché ora i requisiti principali per il menu sono la praticità e la velocità di caricamento rapida.
Infine, due commenti sui codici di cui sopra. Alcuni esempi utilizzano immagini per il menu a discesa in CSS, quindi dovrai guardare attentamente i percorsi delle immagini e fornire i valori corretti per il tuo sito. In secondo luogo, alcune delle soluzioni hanno 2 o 3 anni, quindi dovresti anche controllare le loro prestazioni in diversi browser.
Se conosci altre interessanti implementazioni moderne di menu a discesa orizzontali per il sito, invia collegamenti nei commenti.
