Share
Spesso utilizzati su e-commerce o siti Web su larga scala, i mega menu stanno diventando sempre più popolari, in quanto offrono una soluzione efficace per la visualizzazione di molti contenuti mantenendo un layout pulito. In questo tutorial, apprenderemo come creare un mega menu a discesa cross-browser, fantastico con solo CSS, usando belle funzionalità CSS3.
Se stai cercando un punto di partenza veloce, sfoglia i nostri modelli CSS. O assumere un esperto CSS3. Altrimenti, iniziamo questo tutorial.
Iniziamo con un menu di base, creato con una lista non ordinata e alcuni stili CSS di base.
Ora applicheremo alcuni stili CSS di base. Per il contenitore del menu, definiamo una larghezza fissa che centriamo impostando i margini sinistro e destro su "auto".
#menu list-style: none; larghezza: 940px; margine: 30px auto 0px auto; altezza: 43px; imbottitura: 0px 20px 0px 20px;
Ora, vediamo come possiamo migliorarlo con alcune funzionalità CSS3. Abbiamo bisogno di utilizzare diverse sintassi per i browser basati su Webkit (come Safari) e per i browser basati su Mozilla (come Firefox).
Per gli angoli arrotondati, la sintassi sarà:
-moz-border-radius: 10px -webkit-border-radius: 10px; border-radius: 10px;
Per lo sfondo, utilizzeremo i gradienti e un colore di riserva per i browser più vecchi. Per mantenere la coerenza nella scelta dei colori, c'è un fantastico strumento chiamato Facade che ti aiuta a trovare toni più chiari e scuri di un colore di base.
sfondo: # 014464; sfondo: -moz-linear-gradient (in alto, # 0272a7, # 013953); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0272a7), a (# 013953));
La prima riga applica un colore di sfondo semplice (per i browser più vecchi); la seconda e la terza riga creano una sfumatura dall'alto verso il basso usando due colori: # 0272a7 e # 013953.
Ora possiamo aggiungere un bordo più scuro e lucidare il design con un bordo interno "finto" creato con la funzione "box-shadow". La sintassi è la stessa per tutti i browser compatibili: il primo valore è l'offset orizzontale, il secondo è l'offset verticale, il terzo è il raggio di sfocatura (un piccolo valore lo rende più nitido, nel nostro esempio sarà 1 pixel) . Impostiamo tutti gli offset su 0 in modo che il valore di sfocatura crei un bordo chiaro uniforme:
-moz-box-shadow: inset 0px 0px 1px # edf9ff; -webkit-box-shadow: inset 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff;
Ecco il codice CSS finale per il contenitore #menu:
#menu list-style: none; larghezza: 940px; margine: 30px auto 0px auto; altezza: 43px; imbottitura: 0px 20px 0px 20px; / * Angoli arrotondati * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Colore di sfondo e gradienti * / sfondo: # 014464; sfondo: -moz-linear-gradient (in alto, # 0272a7, # 013953); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0272a7), a (# 013953)); / * Bordi * / bordo: 1px solido # 002232; -moz-box-shadow: inset 0px 0px 1px # edf9ff; -webkit-box-shadow: inset 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff;
Iniziamo con tutte le voci di menu allineate a sinistra e le spazio con un margine destro (il padding sarà necessario per lo stato hover):
#menu li float: left; blocco di visualizzazione; text-align: center; position: relative; imbottitura: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none;
Per lo stato al passaggio del mouse e il menu a discesa, ho scelto una combinazione di colori grigi per lo sfondo.
Il colore di fallback sarà grigio chiaro (# F4F4F4) e il gradiente verrà applicato dall'alto (# F4F4F4) in basso (#EEEEEE). Gli angoli arrotondati verranno applicati solo agli angoli superiori, poiché avremo il menu a discesa che si bloccherà proprio sotto le voci del menu.
sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, # F4F4F4, #EEEEEE); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# F4F4F4), a (#EEEEEE));
Il pad sinistro e destro è leggermente più piccolo qui perché abbiamo un bordo di 1 pixel che appare al passaggio del mouse. Se manterremo lo stesso riempimento, le voci del menu verranno spostate di due pixel a destra a causa dei bordi sinistro e destro aggiunti al passaggio del mouse. Per evitare ciò, rimuoveremo 1 pixel di padding su entrambi i lati, quindi abbiamo 9 pixel anziché 10.
border: 1px solid # 777777; imbottitura: 4px 9px 4px 9px;
Quindi, aggiungiamo gli angoli arrotondati verso l'alto solo in modo che la discesa si attacchi perfettamente sotto la voce di menu genitore:
-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
Ecco il CSS finale per le voci di menu su hover:
#menu li: hover border: 1px solid # 777777; imbottitura: 4px 9px 4px 9px; / * Colore di sfondo e gradienti * / sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, # F4F4F4, #EEEEEE); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# F4F4F4), a (#EEEEEE)); / * Angoli arrotondati * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px;
Per i link, applicheremo una bella ombreggiatura del testo usando una semplice sintassi: il primo e il secondo valore sono offset orizzontali e verticali per l'ombra (1 pixel nel nostro esempio), il terzo è la sfocatura (anche 1 pixel) e allora abbiamo il colore (nero):
text-shadow: 1px 1px 1px # 000;
Ecco il CSS finale per i collegamenti:
#menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; colore: #EEEEEE; blocco di visualizzazione; contorno: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000;
Al passaggio del mouse, mentre lo sfondo è grigio, utilizzeremo un colore più scuro (# 161616) per i collegamenti e il colore bianco per l'ombreggiatura del testo:
#menu li: passa un a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF;
Infine, abbiamo bisogno di un modo per indicare se c'è un drop down o no usando una semplice freccia come sfondo, sarà posizionato sulla destra usando il padding e il margine superiore si allineerà correttamente. Al passaggio del mouse, questo margine superiore verrà impostato su 7 pixel anziché 8, in quanto sul bordo del mouse è presente un bordo aggiuntivo (in caso contrario, la freccia verrebbe spostata di 1 pixel verso il basso sul passaggio del mouse):
Accentsconagua
#menu li .drop padding-right: 21px; background: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; Ecco il nostro codice finale per il contenitore del menu e i collegamenti; per ora l'elemento "home" non ha alcun contenuto a discesa:
#menu list-style: none; larghezza: 940px; margine: 30px auto 0px auto; altezza: 43px; imbottitura: 0px 20px 0px 20px; / * Angoli arrotondati * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Colore di sfondo e gradienti * / sfondo: # 014464; sfondo: -moz-linear-gradient (in alto, # 0272a7, # 013953); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0272a7), a (# 013953)); / * Bordi * / bordo: 1px solido # 002232; -moz-box-shadow: inset 0px 0px 1px # edf9ff; -webkit-box-shadow: inset 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff; #menu li float: left; blocco di visualizzazione; text-align: center; position: relative; imbottitura: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: hover border: 1px solid # 777777; imbottitura: 4px 9px 4px 9px; / * Colore di sfondo e gradienti * / sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, # F4F4F4, #EEEEEE); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# F4F4F4), a (#EEEEEE)); / * Angoli arrotondati * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; colore: #EEEEEE; blocco di visualizzazione; contorno: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; background: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; E il risultato è:
Un menu a tendina "classico" di solito contiene elenchi annidati all'interno di elementi dell'elenco padre e assomiglia a:
Per il nostro Mega Menu, invece di liste annidate, utilizzeremo semplicemente DIV standard, che funzioneranno come qualsiasi elenco annidato:
Questa sarà la struttura di base per il menu a discesa. L'idea alla base è quella di poter includere qualsiasi tipo di contenuto, come paragrafi, immagini, liste personalizzate o un modulo di contatto, organizzato in colonne.
Contenitori con dimensioni diverse manterranno l'intero contenuto a discesa. Ho scelto i nomi dei tag in base al numero di colonne che conterranno.
Per nascondere i menu a discesa, utilizzeremo il posizionamento assoluto con un margine sinistro negativo:
position: absolute; a sinistra: -999em;
Il colore di fallback dello sfondo è uguale a quello utilizzato per le voci di menu. I browser moderni visualizzeranno una sfumatura che inizia con #EEEEEE nella parte superiore (in modo che corrisponda al gradiente della voce di menu principale) e finisca con #BBBBBB nella parte inferiore:
background: # F4F4F4; background: -moz-linear-gradient (in alto, #EEEEEE, #BBBBBB); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (#EEEEEE), a (#BBBBBB));
Useremo nuovamente gli angoli arrotondati, tranne quello in alto a sinistra:
-moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; position: absolute; a sinistra: -999em; / * Nasconde il menu a discesa * / testo-allineato: a sinistra; imbottitura: 10px 5px 10px 5px; border: 1px solid # 777777; border-top: none; / * Sfondo sfumato * / sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, #EEEEEE, #BBBBBB); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (#EEEEEE), a (#BBBBBB)); / * Angoli arrotondati * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px;
Per illustrare questo, vediamo come sarebbe se non avessimo prestato attenzione ai dettagli:
Ora ecco il nostro esempio:
Come puoi vedere, il menu a discesa si adatta perfettamente alla voce del menu principale.
Per avere un contenitore a discesa perfetto, dobbiamo specificare la larghezza per ognuno:
.dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px;
E per mostrare il menu a discesa al passaggio del mouse, utilizzeremo semplicemente:
#menu li: hover .dropdown_1column, #menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; top: auto;
Le nostre lezioni sono pronte per essere incluse nel nostro menu. Useremo ognuno di essi a partire dalla colonna a 5 colonne, dal menu a tendina alla singola colonna:
5 colonne di contenuto
4 contenuto di colonne
3 contenuti di colonne
2 colonne di contenuto
1 contenuto della colonna
Ecco un'anteprima del codice qui sopra:
Ora che abbiamo pronti i contenitori, creeremo colonne di dimensioni crescenti, seguendo i principi del sistema di griglia 960.
.col_1, .col_2, .col_3, .col_4, .col_5 display: inline; fluttuare: a sinistra; posizione: relativa; margin-left: 5px; margin-right: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px;
Ecco un esempio di un menu a discesa contenente diverse colonne. In questo esempio, abbiamo diverse combinazioni che utilizzano tutti i tipi di colonne:
Questo è un contenuto di 5 colonne
Questo è un contenuto di 1 colonna
Questo è un contenuto di 1 colonna
Questo è un contenuto di 1 colonna
Questo è un contenuto di 1 colonna
Questo è un contenuto di 1 colonna
Questo è un contenuto di 4 colonne
Questo è un contenuto di 1 colonna
Questo è un contenuto di 3 colonne
Questo è un contenuto di 2 colonne
Anteprima del codice:
Ora, vediamo come possiamo allineare il nostro menu e il contenuto a discesa sul lato destro della barra di navigazione; non solo la voce di menu, ma anche il contenitore a discesa dovrebbe essere modificato.
Per fare ciò, aggiungeremo una nuova classe chiamata .Menu_Right alla voce della lista genitore, quindi azzeriamo il margine destro e lo spostiamo a destra:
#menu .menu_right float: right; margin-right: 0px;
Quindi, vediamo il menu a discesa. Nel codice CSS precedente, gli angoli arrotondati venivano applicati a tutti gli angoli, tranne quello a sinistra in alto, in modo da corrispondere allo sfondo della voce di menu principale. Ora vogliamo che questa discesa si attenga al bordo destro della voce di menu principale. Quindi, sovrascriviamo i valori del raggio del bordo con una nuova classe chiamata .align_right e impostiamo l'angolo in alto a destra su 0.
#menu li .align_right / * Angoli arrotondati * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px;
Ultimo ma non meno importante, vogliamo far apparire il menu a tendina sulla destra; quindi useremo la nostra nuova classe e resettiamo il valore a sinistra, quindi lo applichiamo a destra:
#menu li: hover .align_right left: auto; destra: -1px; top: auto;
Ora è pronto per essere utilizzato nel menu:
Questo è un contenuto di 1 colonna
E una piccola anteprima del codice qui sopra:
Ora che abbiamo pronto l'intera struttura, possiamo aggiungere tutto il contenuto che vogliamo: testo, elenchi, immagini, ecc.
Iniziamo con uno stile di base per paragrafi e titoli:
#menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; letter-spacing: -1px; margine: 7px 0 14px 0; padding-bottom: 14px; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; margine: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p line-height: 18px; margine: 0 0 10 px 0; .strong font-weight: bold; .italic font-style: italic;
Possiamo applicare un bel colore blu ai collegamenti all'interno del menu a discesa:
#menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb;
Rinnoviamo le nostre liste; dobbiamo ripristinare alcuni stili come il colore di sfondo o i bordi utilizzati nella barra di navigazione:
#menu li ul list-style: none; padding: 0; margine: 0 0 12px 0; #menu li ul li dimensione font: 12px; line-height: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; larghezza: 130px; #menu li ul li: hover background: none; border: none; padding: 0; margin: 0;
.imgshadow background: #FFFFFF; padding: 4px; border: 1px solid # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666;
E per creare un paragrafo con un'immagine a sinistra:
.img_left width: auto; float: sinistra; margine: 5px 15px 5px 5px;
Per evidenziare alcuni contenuti, ecco un esempio di una scatola scura con angoli arrotondati e un'ombra sottile inserita:
#menu li .black_box background-color: # 333333; color: #eeeeee; text-shadow: 1px 1px 1px # 000; imbottitura: 4px 6px 4px 6px; / * Angoli arrotondati * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; / * Shadow * / -webkit-box-shadow: inset 0 0 3px # 000000; -moz-box-shadow: inset 0 0 3px # 000000; box-shadow: inset 0 0 3px # 000000;
E per finire, ecco un altro modo per modellare le tue liste usando, ancora, alcuni CSS3:
#menu li .greybox li background: # F4F4F4; border: 1px solid #bbbbbb; margine: 0px 0px 4px 0px; imbottitura: 4px 6px 4px 6px; larghezza: 116px; / * Angoli arrotondati * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; #menu li .greybox li: hover background: #ffffff; border: 1px solid #aaaaaa; imbottitura: 4px 6px 4px 6px; margine: 0px 0px 4px 0px;
Tutti i browser gestiscono il passaggio del mouse su tag non di ancoraggio ... tranne Internet Explorer 6; quindi il nostro Mega Menu non funziona ancora con questo vecchio browser. Possiamo risolvere questo problema grazie a un file di comportamento che aggiungerà questa funzionalità. Puoi trovarlo qui e utilizzare i commenti condizionali per scegliere solo IE6; ulteriori spiegazioni possono essere trovate tramite questo articolo di CSS-Tricks.
Per scegliere come target IE6, utilizzeremo il seguente codice:
Ho usato alcuni file PNG in questo tutorial e, come tutti sanno, IE6 non supporta la trasparenza, quindi abbiamo diverse soluzioni:
Ti lascerò scegliere quello che si adatta alle tue esigenze. Ora esaminiamo un esempio funzionante completo.
Mega menu a discesa
Ciao e benvenuto qui! Questa è una vetrina delle possibilità di questo fantastico menu a discesa Mega.
Questo articolo viene fornito con una vasta gamma di stili tipografici preparati come intestazioni, elenchi, ecc.
Questo mega menu è stato testato in tutti i principali browser.
Questo è un testo di scatola grigio scuro. Fusce in metus a enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.
Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.
Questo è un esempio di testo in corsivo. Conseguente scelerisque. Fusce sed lectus a arcu mollis accumsan a nec nisi porta quis sit amet.
Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.
Questo è un esempio di testo in grassetto. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.
Mecenate eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.Per saperne di più ...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus a arcu mollis accumsan a nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.Per saperne di più ...
Questa è una scatola nera, puoi usarla per evidenziare alcuni contenuti. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quique vestibulum nisi non nunc blandit placerat. Mauris facilisis, risce ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus a velit varius gravida. Nulla ipsum risus.
Mecenate eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Mecenate imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.Per saperne di più ...
Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus a arcu mollis accumsan a nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. Leggi di più…
body, ul, li font-size: 14px; font-family: Arial, Helvetica, sans-serif; line-height: 21px; text-align: left; / * Barra di navigazione * / #menu list-style: none; larghezza: 940px; margine: 30px auto 0px auto; altezza: 43px; imbottitura: 0px 20px 0px 20px; / * Angoli arrotondati * / -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; / * Colore di sfondo e gradienti * / sfondo: # 014464; sfondo: -moz-linear-gradient (in alto, # 0272a7, # 013953); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# 0272a7), a (# 013953)); / * Bordi * / bordo: 1px solido # 002232; -moz-box-shadow: inset 0px 0px 1px # edf9ff; -webkit-box-shadow: inset 0px 0px 1px # edf9ff; box-shadow: inset 0px 0px 1px # edf9ff; #menu li float: left; text-align: center; position: relative; imbottitura: 4px 10px 4px 10px; margin-right: 30px; margin-top: 7px; border: none; #menu li: hover border: 1px solid # 777777; imbottitura: 4px 9px 4px 9px; / * Colore di sfondo e gradienti * / sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, # F4F4F4, #EEEEEE); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (# F4F4F4), a (#EEEEEE)); / * Angoli arrotondati * / -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; #menu li a font-family: Arial, Helvetica, sans-serif; font-size: 14px; colore: #EEEEEE; blocco di visualizzazione; contorno: 0; text-decoration: none; text-shadow: 1px 1px 1px # 000; #menu li: hover a color: # 161616; text-shadow: 1px 1px 1px #FFFFFF; #menu li .drop padding-right: 21px; background: url ("img / drop.png") no-repeat right 8px; #menu li: hover .drop background: url ("img / drop.png") no-repeat right 7px; / * Drop Down * / .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns margin: 4px auto; float: sinistra; position: absolute; a sinistra: -999em; / * Nasconde il menu a discesa * / testo-allineato: a sinistra; imbottitura: 10px 5px 10px 5px; border: 1px solid # 777777; border-top: none; / * Sfondo sfumato * / sfondo: # F4F4F4; background: -moz-linear-gradient (in alto, #EEEEEE, #BBBBBB); background: -webkit-gradient (lineare, 0% 0%, 0% 100%, da (#EEEEEE), a (#BBBBBB)); / * Angoli arrotondati * / -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; .dropdown_1column width: 140px; .dropdown_2columns width: 280px; .dropdown_3columns width: 420px; .dropdown_4columns width: 560px; .dropdown_5columns width: 700px; #menu li: hover .dropdown_1column, # menu li: hover .dropdown_2columns, #menu li: hover .dropdown_3columns, #menu li: hover .dropdown_4columns, #menu li: hover .dropdown_5columns left: -1px; top: auto; / * Colonne * / .col_1, .col_2, .col_3, .col_4, .col_5 display: inline; fluttuare: a sinistra; posizione: relativa; margin-left: 5px; margin-right: 5px; .col_1 width: 130px; .col_2 width: 270px; .col_3 width: 410px; .col_4 width: 550px; .col_5 width: 690px; / * Allineamento a destra * / #menu. menu_right float: right; margin-right: 0px; #menu li .align_right / * Angoli arrotondati * / -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; #menu li: hover .align_right left: auto; destra: -1px; top: auto; / * Drop Down Content Stylings * / #menu p, #menu h2, #menu h3, #menu ul li font-family: Arial, Helvetica, sans-serif; line-height: 21px; font-size: 12px; text-align: left; text-shadow: 1px 1px 1px #FFFFFF; #menu h2 font-size: 21px; font-weight: 400; letter-spacing: -1px; margine: 7px 0 14px 0; padding-bottom: 14px; border-bottom: 1px solid # 666666; #menu h3 font-size: 14px; margine: 7px 0 14px 0; padding-bottom: 7px; border-bottom: 1px solid # 888888; #menu p line-height: 18px; margine: 0 0 10 px 0; #menu li: hover div a font-size: 12px; color: # 015b86; #menu li: hover div a: hover color: # 029feb; .strong font-weight: bold; .italic font-style: italic; .imgshadow background: #FFFFFF; padding: 4px; border: 1px solid # 777777; margin-top: 5px; -moz-box-shadow: 0px 0px 5px # 666666; -webkit-box-shadow: 0px 0px 5px # 666666; box-shadow: 0px 0px 5px # 666666; .img_left / * L'immagine rimane a sinistra * / larghezza: auto; float: sinistra; margine: 5px 15px 5px 5px; #menu li .black_box background-color: # 333333; color: #eeeeee; text-shadow: 1px 1px 1px # 000; imbottitura: 4px 6px 4px 6px; / * Angoli arrotondati * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; / * Shadow * / -webkit-box-shadow: inset 0 0 3px # 000000; -moz-box-shadow: inset 0 0 3px # 000000; box-shadow: inset 0 0 3px # 000000; #menu li ul list-style: none; padding: 0; margine: 0 0 12px 0; #menu li ul li dimensione font: 12px; line-height: 24px; position: relative; text-shadow: 1px 1px 1px #ffffff; padding: 0; margin: 0; float: none; text-align: left; larghezza: 130px; #menu li ul li: hover background: none; border: none; padding: 0; margin: 0; #menu li .greybox li background: # F4F4F4; border: 1px solid #bbbbbb; margine: 0px 0px 4px 0px; imbottitura: 4px 6px 4px 6px; larghezza: 116px; / * Angoli arrotondati * / -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; #menu li .greybox li: hover background: #ffffff; border: 1px solid #aaaaaa; imbottitura: 4px 6px 4px 6px; margine: 0px 0px 4px 0px; Spero che ti sia piaciuto questo tutorial sulla creazione di mega menu. Grazie per il seguito!
Inoltre, se hai bisogno di un rapido punto di partenza per costruire un sito web professionale, sfoglia la nostra galleria di modelli CSS. Offrono un numero di funzionalità professionali pronte all'uso.
