Creiamo un semplice menu di navigazione orizzontale per il sito. Per fare ciò, utilizzeremo semplici tecniche che porteranno alla corretta visualizzazione del nostro menu in tutti i browser.
Quindi, cominciamo. Creiamo una lista con i nomi del nostro menù. Lascia che i nomi degli elementi siano: “Home”, “Novità”, “Prodotti”, “Servizi”, “Partner”, “Contatti”. Crea un nuovo file chiamato menu.html, ad esempio, utilizzando il programma Dreamweawer o utilizzando un normale blocco note. In esso, tra i tag del corpo inseriamo il nostro menu. Questo è un normale elenco puntato di ul con elementi li. Naturalmente trasformiamo ogni voce di menu in un collegamento, dove al posto dell'URL inseriamo l'hash #. Utilizzando Photoshop, crea un'immagine di dimensioni 3x30 px, con un riempimento sfumato come mostrato nella figura seguente. Salveremo il file in formato GIF. Chiamiamolo bg.gif. Questa immagine fungerà da immagine di sfondo del nostro menu.
Ecco il contenuto del file menu.html:
- casa
- Notizia
- Prodotti
- Servizi
- Partner
- Contatti
Ora creiamo separatamente un file di stile chiamato main.css. Il suo elenco è mostrato per intero di seguito.
Ul ( margine:0; /*zero riempimento*/ riempimento:0; /*zero riempimento*/ float:sinistra; /*allinea l'elenco a sinistra*/ larghezza:auto;/*imposta la larghezza dell'auto in base a il tipo e il contenuto della lista */ background-image: url(bg.gif); /*imposta l'immagine di sfondo*/ background-repeat:repeat-x; /*ripete la nostra immagine orizzontalmente*/ list-style:none; /*rimuove i marcatori dell'elenco*/ background-color:#4778c3; /*imposta il colore di sfondo per l'immagine*/ font-size:13px; /*imposta la dimensione del carattere*/ font-family:Arial, Helvetica, sans-serif ; /*imposta il carattere*/ ) ul li ( float:left; /*allinea gli elementi dell'elenco a sinistra*/ ) ul a ( display:block; /*rappresenta i collegamenti del menu come elementi di blocco*/ larghezza:100px; /* imposta la dimensione del blocco*/ altezza:30px; /* e l'altezza del blocco*/ text-align:center; /*iscrizione centrata*/ line-height: 2.1em; /*interlinea*/ text-decoration:none; /* rimuovi la sottolineatura dai collegamenti*/ color:#fff; /*colore del testo del collegamento: bianco*/ border-right:#fff solido 1px; /*bordo sul lato destro del blocco (linea bianca 1px)*/ ) ul a: passa il mouse (colore:#ccc; /*il collegamento cambia colore quando ci si passa sopra*/ )
Penso che non dovrebbero esserci domande sul contenuto del file main.css, ho scritto i suggerimenti nei commenti in modo sufficientemente dettagliato e chiaro, quindi non mi ripeterò. Non dimenticare di collegarlo alla nostra pagina menu.html utilizzando
Riassumere. Di conseguenza, abbiamo ottenuto un menu orizzontale completamente cross-browser che ha lo stesso aspetto non solo in tutti i browser moderni, ma anche in rarità come IE 5.5 e IE 6.0. Tutti gli elementi del menu sono presentati come elementi a blocchi e hanno le stesse dimensioni di 100 px di larghezza e 30 px di altezza. Come separatore per le voci di menu, viene utilizzato un design di elemento blocco utilizzando un bordo destro bianco spesso 1 px. Questo è praticamente il modo più semplice per implementare un menu orizzontale. Naturalmente, se lo desideri, puoi modificarlo, renderlo più bello e funzionale utilizzando la fantasia, le proprietà CSS ed elementi grafici aggiuntivi. bene e il nostro menù orizzontale assomiglia a questo:
Pro di questa soluzione:
Facile da fare
Codice semplice
Nessuna tabella o JavaScript
Compatibilità cross-browser: il menu ha lo stesso aspetto in tutti i browser
Viene utilizzato un solo disegno
Codice minimo sulla pagina menu.html
Codice minimo per implementare gli stili in main.css
I file utilizzati in questo esempio possono essere scaricati nell'archivio
Compito
Crea un menu orizzontale, le cui voci hanno una pendenza arbitraria (Fig. 1).
Riso. 1. Visualizzazione del menu con voci inclinate
Soluzione
La proprietà style transform è responsabile della trasformazione dell'elemento; come valore viene utilizzata la funzione skewX, che imposta la pendenza desiderata. È più semplice impostare l'angolo di inclinazione in gradi, ad esempio 30° corrisponde a 30° dalla verticale. La trasformazione interessa anche tutti gli elementi figlio, quindi anche il testo all'interno dell'elemento verrà inclinato, il che non ha l'effetto migliore sulla sua leggibilità e bellezza. È quindi importante applicare nuovamente l'inclinazione al testo, ma nella direzione opposta; per fare ciò è sufficiente cambiare il segno davanti al valore dei gradi.
I browser supportano la proprietà di trasformazione principalmente con i propri prefissi, quindi per l'universalità negli stili dovresti ripeterla più volte con lo stesso valore, aggiungendo -moz- per Firefox, -webkit- per Safari e Chrome, -o- per Opera e -ms - per il browser Internet Explorer come mostrato nell'esempio 1.
Esempio 1: voce di menu Inclinazione
HTML5 CSS3 IE Cr Op Sa Fx
- Burlone
- Pazuzu
- Palpatine
- Dottor Destino
In questo esempio viene creato un menu orizzontale utilizzando un elenco puntato. Per garantire che l'elenco sia orizzontale, all'elemento li negli stili viene aggiunta una proprietà display con il valore inline-block. Per l'inclinazione, utilizzare la proprietà di trasformazione con la funzione skewX e il valore -30º. Questa proprietà viene applicata anche ai collegamenti all'interno dell'elenco, ma con un valore positivo di 30º garantisce che le lettere vengano visualizzate correttamente anziché inclinate.
I browser Chrome, Safari e Firefox utilizzano la proprietà di trasformazione su elementi di blocco o incorporati, quindi i collegamenti hanno la proprietà di visualizzazione impostata su blocca .
In questo tutorial creeremo menu orizzontale nei CSS. Naturalmente, puoi utilizzare soluzioni già pronte, ad esempio assumere programmatori per CMS Made Simple. Tuttavia, non stai cercando modi semplici, vero? :bullo:
Passaggio 1: markup HTML
Per prima cosa dobbiamo creare elementi dell'elenco con un tag per ogni elemento nel nostro menu orizzontale. Per creare un sottomenu è necessario aggiungere un'altra lista secondaria all'interno di quella principale.
Passaggio 2: crea stili CSS per il menu orizzontale
Inizialmente, il menu appare verticale, per risolvere questo problema scriveremo alcuni stili, modificheremo i rientri, i bordi, il colore dello sfondo e smusseremo gli angoli. Fisseremo la larghezza e l'altezza. Allineeremo gli elementi del menu a sinistra utilizzando float: left (in modo che la navigazione acquisisca una struttura orizzontale).
Menu, .menu ul, .menu li, .menu a (margine: 0; riempimento: 0; bordo: nessuno; contorno: nessuno; ) .menu (altezza: 40px; larghezza: 505px; sfondo: #4c4e5a; sfondo: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); sfondo: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); sfondo: -o-linear-gradient( in alto, #5c5e6a 0%,#3c3d44 100%); sfondo: -ms-linear-gradient(in alto, #5c5e6a 0%,#3c3d44 100%); sfondo: linear-gradient(in alto, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li ( posizione: relativa; stile elenco: nessuno; float: sinistra; display: blocco ; altezza: 40px; )
Scriviamo per un po' il seguente stile, nascondendo l'elenco a discesa. Ciò renderà più semplice la modifica.
Passaggio 3: stile del menu di collegamento
Successivamente, scriveremo stili che aggiungono alcune proprietà CSS di base come tipo di carattere, colori, riempimento, ecc. Quindi aggiungeremo un'ombra per il testo e le transizioni di colore per creare un effetto uniforme in cui il colore non cambia istantaneamente, ma a un certo intervallo. Per creare un separatore di collegamento, aggiungiamo un bordo a sinistra e a destra, quindi rimuoviamo il bordo sinistro dal primo collegamento e il bordo destro dall'ultimo collegamento. Quando passi il mouse sul menu, cambierà solo il colore.
Menu li a ( display: blocco; riempimento: 0 14px; margine: 6px 0; altezza linea: 28px; decorazione del testo: nessuna; bordo sinistro: 1px solido #494942; bordo destro: 1px solido #4f5058; font- famiglia: Helvetica, Arial, sans-serif; peso carattere: grassetto; dimensione carattere: 13px; colore: #f4f4f4; ombra testo: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : colore .3s facilità di ingresso-uscita; -moz-transition: colore .3s facilità di ingresso-uscita; -o-transition: colore .3s facilità di ingresso-uscita; -ms-transition: colore .3s facilità di ingresso- out; transizione: color .3s easy-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: passa il mouse > a ( colore: #9fde63; )
Passaggio 4: menu a discesa
Prima di tutto rimuoviamo questa riga di codice che abbiamo aggiunto nel secondo passaggio.
Menu ul (visualizzazione: nessuno;)
Ora modificheremo lo stile per il sottomenu. Aggiungiamo un posizionamento del sottomenu di 40px in alto e 0px a sinistra della voce di menu e aggiungiamo angoli arrotondati in basso. Impostiamo l'opacità su zero e cambiamola su 1 al passaggio del mouse per creare un effetto di dissolvenza in entrata/uscita. Per l'effetto di scorrimento su/giù, dobbiamo impostare l'altezza dell'elenco su 0px quando il menu a discesa è nascosto e 36px quando si passa sopra il menu a discesa.
Menu ul ( posizione: assoluta; superiore: 40px; sinistra: 0; opacità: 0; sfondo: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- raggio: 0 0 4px 4px; -webkit-transition: opacità .3s facilità .1s; -moz-transition: opacità .3s facilità .1s; -o-transition: opacità .3s facilità .1s; -ms-transition: opacità . 3s facilità .1s; transizione: opacità .3s facilità .1s; ) .menu li:hover > ul ( opacità: 1; ) .menu ul li ( altezza: 0; overflow: nascosto; riempimento: 0; -webkit-transizione: altezza .3s facilità .1s; -moz-transition: altezza .3s facilità .1s; -o-transition: altezza .3s facilità .1s; -ms-transition: altezza .3s facilità .1s; transizione: altezza .3s facilità .1s; 1s; ) .menu li:hover > ul li ( altezza: 36px; overflow: visibile; imbottitura: 0; )
Imposta la larghezza del menu a discesa selezionabile su 100 px. Dopo ogni collegamento ho aggiunto un bordo per separarli. Rimuoveremo il bordo nell'ultimo collegamento.
Menu ul li a ( larghezza: 100px; riempimento: 4px 0 4px 40px; margine: 0; bordo: nessuno; bordo inferiore: 1px solido #464649; ) .menu ul li:last-child a ( bordo: nessuno; )
Per completare un menu CSS orizzontale, è necessario aggiungere un'icona per ciascun sottomenu a discesa. Per fare ciò, creeremo una classe personalizzata per ciascuno dei sottomenu e aggiungeremo un'immagine di sfondo.
Menu a.d ( background: url(docs.png) no-repeat 6px center; ) .menu a.m ( background: url(bubble.png) no-repeat 6px center; ) .menu a.s ( background: url(arrow.png) no -ripeti 6px al centro;)
Conclusione
Abbiamo creato con successo un menu a discesa orizzontale utilizzando gli stili CSS3 e senza utilizzarlo, sebbene fosse anche possibile. Se avete domande, fatemelo sapere nei commenti.
(download: 395)
Se il tuo sito web è più di una semplice pagina web, dovresti prendere in considerazione l'aggiunta di una barra di navigazione (menu). Il menu è una sezione di un sito Web progettata per aiutare i visitatori a navigare nel sito. Qualsiasi menu è un elenco di collegamenti che portano alle pagine interne del sito. Il modo più semplice per aggiungere una barra di navigazione al tuo sito è creare un menu utilizzando CSS e HTML.
Menù verticale
Il primo passo nella creazione di un menu verticale è creare un elenco puntato. Dovremo anche essere in grado di identificare l'elenco, quindi aggiungeremo ad esso un attributo id con l'identificatore "navbar". Ogni elemento
Il nostro prossimo compito è ripristinare gli stili di elenco predefiniti. Dobbiamo rimuovere il riempimento esterno ed interno dall'elenco stesso e i punti elenco dagli elementi dell'elenco. Quindi imposta la larghezza desiderata:
#navbar (margine: 0; riempimento: 0; tipo stile elenco: nessuno; larghezza: 100px;)
Ora è il momento di modellare i collegamenti stessi. Aggiungeremo loro un colore di sfondo, modificheremo i parametri del testo: colore, dimensione e spessore del carattere, rimuoveremo la sottolineatura, aggiungeremo piccoli rientri e ridefiniremo la visualizzazione elemento da inline a blocco. Inoltre, alle voci dell'elenco sono stati aggiunti i frame sinistro e inferiore.
La parte più importante delle nostre modifiche è la ridefinizione degli elementi in linea in elementi blocco. Ora i nostri collegamenti occupano tutto lo spazio disponibile delle voci dell'elenco, ovvero per seguire il collegamento non è più necessario posizionare il cursore esattamente sopra il testo.
#navbar a ( colore di sfondo: #949494; colore: #fff; imbottitura: 5px; decorazione del testo: nessuna; peso carattere: grassetto; bordo sinistro: 5px solido #33ADFF; display: blocco; ) #navbar li ( bordo sinistro: 10px solido #666; bordo inferiore: 1px solido #666; )
Abbiamo combinato tutto il codice sopra descritto in un unico esempio, ora cliccando sul pulsante prova puoi andare alla pagina di esempio e vedere il risultato:
Quando si passa il mouse su una voce di menu, il suo aspetto potrebbe cambiare, attirando l'attenzione dell'utente. Puoi creare un tale effetto usando la pseudo-class:hover.
Torniamo all'esempio del menu verticale discusso in precedenza e aggiungiamo la seguente regola al foglio di stile:
#navbar a:hover ( background-color: #666; border-left: 5px solid #3333FF; ) Prova »
Menù orizzontale
Nell'esempio precedente, abbiamo esaminato la barra di navigazione verticale, che più spesso si trova sui siti web a sinistra o a destra dell'area del contenuto principale. Tuttavia, anche i menu con i collegamenti di navigazione si trovano spesso orizzontalmente nella parte superiore della pagina web.
È possibile creare un menu orizzontale definendo un elenco regolare. Visualizza proprietà per gli elementi
Per posizionare le voci di menu in orizzontale, crea prima un elenco puntato con collegamenti:
Scriviamo un paio di regole per il nostro elenco che reimpostano lo stile predefinito utilizzato per gli elenchi e ridefiniscono gli elementi dell'elenco da blocco a in linea:
#navbar ( margine: 0; riempimento: 0; tipo stile elenco: none; ) #navbar li ( display: inline; ) Prova »
Adesso non ci resta che definire lo stile del nostro menù orizzontale:
#navbar (margine: 0; riempimento: 0; tipo stile elenco: nessuno; bordo: 2px solido #0066FF; raggio bordo: 20px 5px; larghezza: 550px; allineamento testo: centro; colore sfondo: #33ADFF; ) #navbar a ( colore: #fff; riempimento: 5px 10px; decorazione del testo: nessuna; peso carattere: grassetto; display: blocco in linea; larghezza: 100px; ) #navbar a:hover ( raggio bordo: 20px 5px ; colore di sfondo: #0066FF; ) Prova »
Menu a discesa
Il menu che creeremo avrà collegamenti di navigazione principali situati nella barra di navigazione orizzontale e voci secondarie che appariranno solo quando il cursore del mouse passa sopra la voce di menu a cui si riferiscono queste voci secondarie.
Per prima cosa dobbiamo creare la struttura HTML del nostro menu. Inseriremo i collegamenti di navigazione principali in un elenco puntato:
Posizioneremo le sottovoci in un elenco separato, nidificandole nell'elemento
Tentativo "
Ora iniziamo a scrivere il codice CSS. Per prima cosa è necessario nascondere l'elenco con i sottoelementi utilizzando la dichiarazione display: none; in modo che non vengano sempre visualizzati sulla pagina web. Per visualizzare gli elementi secondari, ne abbiamo bisogno quando passiamo con il mouse sopra un elemento
#navbar ul ( display: none; ) #navbar li:hover ul ( display: block; )
Rimuoviamo i rientri e i marcatori predefiniti da entrambi gli elenchi. Rendiamo mobili gli elementi della lista con collegamenti di navigazione, formando un menu orizzontale, ma per gli elementi della lista contenenti sottoelementi impostiamo float: none; in modo che appaiano uno sotto l'altro.
#navbar, #navbar ul ( margine: 0; riempimento: 0; tipo stile elenco: nessuno; ) #navbar li ( float: sinistra; ) #navbar ul li ( float: none; )
Successivamente, dobbiamo assicurarci che il nostro sottomenu a discesa non spinga verso il basso il contenuto sotto la barra di navigazione. Per fare ciò, imposteremo la posizione degli elementi dell'elenco: relativa; e un elenco contenente le sottovoci position: Absolute; e aggiungi una proprietà superiore con un valore del 100% in modo che il sottomenu posizionato in modo assoluto appaia esattamente sotto il collegamento.
#navbar ul ( display: none; posizione: assoluta; superiore: 100%; ) #navbar li ( float: sinistra; posizione: relativa; ) #navbar ( altezza: 30px; ) Prova »
L'altezza per l'elenco principale è stata aggiunta di proposito, poiché i browser non considerano il contenuto mobile come contenuto dell'elemento, senza aggiungere altezza il nostro elenco verrà ignorato dal browser e il contenuto che segue l'elenco si avvolgerà nel nostro menu.
Ora dobbiamo solo dare uno stile a entrambi i nostri elenchi e il menu a discesa sarà pronto:
#navbar ul ( display: none; background-color: #f90; posizione: assoluta; superiore: 100%; ) #navbar li:hover ul ( display: block; ) #navbar, #navbar ul ( margine: 0; riempimento: 0; tipo di stile elenco: none; ) #navbar ( altezza: 30px; colore di sfondo: #666; riempimento-sinistra: 25px; larghezza minima: 470px; ) #navbar li ( float: sinistra; posizione: relativa; altezza: 100%; ) #navbar li a ( display: blocco; imbottitura: 6px; larghezza: 100px; colore: #fff; decorazione testo: nessuna; allineamento testo: centro; ) #navbar ul li ( float: none; ) #navbar li:hover ( background-color: #f90; ) #navbar ul li:hover ( background-color: #666; )
1. Menu jQuery luminoso verticale
2. Effetto fantastico. Menù danzante.
4. Elenco a discesa utilizzando jQuery
Stile eccellente dell'elemento dell'interfaccia sotto forma di elenco a discesa.
Quando passi il mouse sul pulsante, in alto viene visualizzato un pannello.
6. Plugin jQuery “MobilyBlocks” per la visualizzazione di un menu radiale
7. Menu utilizzando gli sprite
Menu javascript animato con effetto bagliore.
Menu fresco e gradevole utilizzando jQuery.
9. jQuery menu "GarageDoor".
10. Menu a scorrimento verticale jQuery
Implementazione di un menu con un gran numero di voci. Scorre quando si sposta il cursore del mouse verso l'alto o verso il basso.
11. Progettazione dell'elenco a discesa jQuery
12. Plug-in di navigazione della pagina
Scorrimento fluido fino alla sezione desiderata della pagina. Plug-in jQuery per la navigazione di una pagina.
13. Plug-in “Menu contenuti animati”
Nuovo plugin jQuery. Ottima implementazione della navigazione animata del sito. Scorrendo le voci del menu si apre un blocco con la descrizione e i possibili collegamenti e, a seconda della voce selezionata, cambia lo sfondo della pagina, che si allunga fino a riempire l'intero schermo indipendentemente dalla dimensione della finestra del browser. Assicurati di controllare la pagina demo.
14. Plug-in del menu jQuery "Sweet Menu".
Menu animato con elementi pop-up.
15. Risolto il problema con il menu jQuery
Quando si scorre la pagina verso il basso, il menu rimane fisso nella parte superiore dello schermo.
16. Menu di scorrimento del kit cursore
Per implementare un menu verticale con un gran numero di voci. Lo scorrimento degli elementi viene effettuato utilizzando la rotellina del mouse o utilizzando i collegamenti "Precedente" e "Avanti".
17. Elegante menu CSS3
18. Nuovo menu CSS3 in stile Apple
Nuovo menù in stile Apple. Sembra più scuro di prima, ma non per questo meno carino.
19. Menu jQuery originale
Menu a discesa con effetto di sfondo. Le sottovoci del menu si espandono verso l'alto. Quando passi il mouse su una voce di menu, l'immagine di sfondo cambia.
20. Menù animato con jQuery
Menù animato. Le voci di menu sono presentate sotto forma di icone e descrizioni. Diversi fantastici effetti quando si passa il mouse su una voce di menu. Ci sono 8 effetti, per vederli tutti segui i link Exemple1-Exemple8 nella pagina demo.
21. Menù XML “Scrolling menu” con scorrimento
Menù a scorrimento verticale e orizzontale. Una buona soluzione se il menu contiene un gran numero di voci.
22. Menu contestuale su un sito Web utilizzando jQuery
Viene visualizzato un menu quando si fa clic con il pulsante destro del mouse su un'area specifica.
23. Menù circolare a due livelli per il sito
Quando si seleziona una voce di menu, le voci del sottomenu vengono visualizzate sulla destra.
24. Menu jQuery CSS3 con effetto sfocato “Menu Sfocatura” CSS3
Il menu originale jQuery CSS3 è disponibile in 7 stili diversi. Quando passi il mouse su una delle voci del menu, il resto sembra sfocato.
25. Alcuni spettacolari menu animati jQuery CSS3
10 menu animati creativi. Menu CSS3 orizzontali e verticali con vari effetti e transizioni.
L'archivio include anche il file PSD del menu originale.
27. Menù MagicLine
Lo sfondo o la sottolineatura di una voce di menu segue il movimento del mouse con un leggero ritardo, mentre lo sfondo cambia gradualmente colore mentre si sposta da una voce all'altra. Effetto molto bello, sembra insolito. Attenzione: l'effetto non funziona nell'opera
28. Bolle di immagini
Un effetto eccellente quando passi il mouse su una delle immagini. L'effetto ricorda in qualche modo il jQDock descritto sopra.
31. Interessanti menu jQuery con vari effetti
Menù orizzontale, verticale. Effetti interessanti.
32. Ottimo menu jQuery in stile Apple
34. Menu jQuery con un effetto interessante
36. Menu fresco con un effetto interessante utilizzando jQuery
Un effetto molto interessante. Perfetto per la progettazione di siti Web di portfolio.
Interessante effetto delle miniature che appaiono al passaggio del mouse.
40. Elenco a discesa con scorrimento automatico
Piacevole effetto di transizione tra gli elementi.
42. Ottimo menu jQuery
43. Bellissimo menu jQuery di grandi dimensioni
44. Menu a scorrimento jQuery
Le voci di menu sono presentate sotto forma di miniature.
46. Menu di navigazione radiale jQuery
47. Menu CSS e jQuery
Una barra di navigazione con una casella di ricerca che diventa traslucida mentre scorri la pagina.
48. Menu jQuery orizzontale
49. Menu jQuery verticale
Ottimo menù verticale. Quando passi il cursore, viene visualizzata una voce di menu.
50. Menu jQuery orizzontale
Un effetto interessante quando si passa il cursore su una voce di menu.
52. Menu a discesa jQuery
Quando passi il mouse sul menu, verranno visualizzati i suoi elementi. Gli elementi visualizzati vengono visualizzati sotto forma di un arco, il cui raggio è possibile impostare durante la configurazione del plugin. In alcuni browser non vedrai una visualizzazione ad arco, il menu verrà visualizzato direttamente, ma ciò non rovinerà comunque l'impressione generale di questa implementazione del menu jQuery.
53. Barra di navigazione CSS e jQuery
Un effetto interessante quando si passa il mouse su una voce di menu.
54. Pannello popup jQuery
Menù animato fresco nei toni del grigio.
58. Navigazione del sito a colonne utilizzando jQuery
Una soluzione interessante per la navigazione, che si presenta sotto forma di strisce verticali. Quando passi il mouse su queste barre, vengono visualizzati un'immagine per l'elemento e un elenco di sottomenu. Quando si fa clic su una voce di sottomenu, viene visualizzata una pagina con una descrizione. Questa implementazione è perfetta per siti promozionali o presentazioni. Assicurati di controllare la demo del plugin.
59. Navigazione del sito jQuery
La navigazione del sito si presenta sotto forma di 4 immagini, passando il mouse sopra di esse noterai un interessante effetto animato.
60. La barra di navigazione scorre con il contenuto
Pannello 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 e ordinato
63. Menu jQuery "Pennelli per acquerello".
