In questo tutorial, ti mostreremo come creare un menu a discesa laterale per una navigazione del sito ancora più semplice. Questo menu è una tendenza popolare nel web design moderno. Molti siti utilizzano questo tipo di menu. Con il suo aiuto, puoi liberarti del caos sulle pagine del progetto, renderlo più leggibile, focalizzando l'attenzione degli utenti sul contenuto principale.

È un ottimo modo per raggiungere il minimalismo senza distrazioni. Oggi creeremo noi stessi un menu del genere.

Per creare un menu di navigazione, diamo prima un'occhiata alle impostazioni:

Per prima cosa devi caricare Normalize.css e impostare gli stili di browser predefiniti per assicurarti che il menu abbia lo stesso aspetto su tutti i browser. Useremo FontAwesome per visualizzare una freccia davanti alle voci di menu con voci secondarie. Per cambiare classe nel menu, carica jQuery e sposta tutto il codice jQuery personalizzato in script.js. L'ultimo collegamento è la tabella principale per il progetto web.

Icona dell'hamburger

L'icona dell'hamburger è un attributo comune di navigazione del sito. Viene spesso creato utilizzando un carattere icona come FontAwesome, ma in questo tutorial aggiungeremo alcune animazioni in modo da crearlo da zero. La nostra icona dell'hamburger è un tag span contenente tre div di classe, visualizzati come barre orizzontali.

Gli stili assomigliano a questo:

Pulsante di commutazione (posizione: fissa; larghezza: 44 px; altezza: 40 px; padding: 4 px; transizione: .25s; z-index: 15;) .toggle-button: hover (cursore: puntatore;) .toggle-button .menu -bar (posizione: assoluta; bordo-raggio: 2px; larghezza: 80%; transizione: .5s;) .toggle-button .menu-bar-top (bordo: 4px solido # 555; bordo-basso: nessuno; alto: 0;) .toggle-button .menu-bar-middle (height: 4px; background-color: # 555; margin-top: 7px; margin-bottom: 7px; top: 4px;) .toggle-button .menu-bar -bottom (border: 4px solid # 555; border-top: nessuno; top: 22px;) .button-open .menu-bar-top (trasforma: ruota (45deg) trasla (8px, 8px); transizione: .5s; ) .button-open .menu-bar-middle (transform: translate (230px); transition: .1s easy-in; opacity: 0;) .button-open .menu-bar-bottom (trasformare: ruotare (-45deg) tradurre (8px, -7px); transizione: .5s;)

L'icona ha una posizione fissa e non cambia durante lo scorrimento della pagina. Ha anche uno z-index di 15, il che significa che sarà sempre sopra gli altri elementi. Consiste di tre barre, ognuna delle quali condivide altri stili. Pertanto, sposteremo ogni barra nella classe .menu-bar. Sposta il resto degli stili in classi separate. La magia accade quando aggiungiamo un'altra classe al tag span che è pubblico. Lo aggiungiamo usando jQuery in questo modo:

$ (document) .ready (function () (var $ toggleButton = $ (. toggle-button"); $ toggleButton.on ("click", function () ($ (this) .toggleClass ("button-open" );));));

Per chi non ha familiarità con jQuery, inizializziamo una variabile con $ toggleButton che contiene la nostra icona. Lo memorizziamo inutilmente in una variabile usando JavaScript... Quindi creiamo un ascoltatore di eventi che tenga conto dei clic sull'icona. Ogni volta che l'utente fa clic sull'icona dell'hamburger, il listener di eventi attiva la funzione toggleClass(), che attiva o disattiva la classe .button-open.

Con l'aggiunta della classe .button-open, possiamo usarla per cambiare la modalità di visualizzazione degli elementi. Utilizziamo le funzioni CSS3 translate() e rotate() per fare in modo che le strisce superiore e inferiore ruotino di 45 gradi e la striscia centrale si sposti a destra e scompaia. Ecco l'animazione che puoi personalizzare:

Menu di navigazione a discesa

Ora che hai l'icona dell'hamburger, rendiamolo utile e creiamo un menu a discesa quando fai clic su di esso. Ecco come appare il markup del menu:

Non entreremo nei dettagli su ogni stile per questo menu ora, invece ci concentreremo su alcuni punti importanti. Prima di tutto, è una classe div e .menu-wrap. Dai un'occhiata ai suoi stili:

Menu-wrap (colore di sfondo: # 6968AB; posizione: fissa; alto: 0; altezza: 100%; larghezza: 280 px; margine sinistro: -280 px; dimensione carattere: 1em; peso carattere: 700; overflow: auto ; transizione: .25s; z-index: 10;)

La posizione è fissa, quindi durante lo scorrimento della pagina il menu rimane sempre in una posizione. Un'altezza del 100% consente al menu di occupare tutto lo spazio verticale della pagina. Nota che il margine sinistro è impostato su un numero negativo uguale alla larghezza del menu. Ciò significa che il menu scomparirà dalla finestra. Per renderlo nuovamente visibile, creiamo un'altra classe toggler con jQuery. Il nostro file JavaScript sarà simile a questo:

$ (document) .ready (function () (var $ toggleButton = $ (". toggle-button"), $ menuWrap = $ (". menu-wrap"); $ toggleButton.on ("click", funzione () ($ (this) .toggleClass ("pulsante-apri"); $ menuWrap.toggleClass ("menu-show");));));

Aggiungi un'altra variabile $ menuWrap che contiene il wrapper del menu. Usa lo stesso gestore di eventi che abbiamo creato in precedenza. Solo che questa volta cambiamo due classi: una per il pulsante e una per la shell del menu. Il margine sinistro della classe .menu-show è 0, questo aggiungerà un effetto ombra esterna.

Menu-show (margine sinistro: 0; box-shadow: 4px 2px 15px 1px # B9ADAD;)

Sottomenu e collegamenti

Potresti notare che uno degli elementi dell'elenco ha una classe .menu-item-has-child che contiene un sottomenu. Inoltre, appena sotto il collegamento c'è un tag span con la classe .sidebar-menu-arrow.

Fare clic sulla freccia

span ha :: dopo lo pseudo-elemento e contiene una freccia FontAwesome. Per impostazione predefinita, il sottomenu è nascosto e sarà visibile solo quando si fa clic sulla freccia. Ecco come possiamo farlo con jQuery:

$ (document) .ready (function () (var $ sidebarArrow = $ (". sidebar-menu-arrow"); $ sidebarArrow.click (function () ($ (this) .next (). slideToggle (300); ));));

Quando facciamo clic sulla freccia, chiamiamo una funzione, che a sua volta prende di mira l'elemento successivo immediatamente dopo lo span (nel nostro caso è un sottomenu) e lo rende visibile. La funzione che stiamo usando è slideToggle. Fa apparire e scomparire l'elemento. La funzione nel nostro esempio ha un parametro: la durata dell'animazione.

Le voci di menu nell'esempio hanno un effetto al passaggio del mouse. Viene creato utilizzando :: dopo lo pseudo-elemento. Il codice è simile a questo:

Menu-sidebar li> a :: after (content: ""; display: block; height: 0.15em; position: absolute; top: 100%; width: 102%; left: 50%; transform: translate (-50% ); background-image: linear-gradient (a destra, trasparente 50,3%, # FFFA3B 50,3%); transizione: background-position .2s .1s easy-out; background-size: 200% auto;) .menu-sidebar li > a: hover :: dopo (posizione di sfondo: -100% 0;)

Lo pseudo-elemento :: after contiene un elemento a livello di blocco nella parte inferiore di ogni collegamento con una larghezza e un'altezza complete di 0,15 em. Sembra tutto una sottolineatura. La particolarità è che non applichiamo solo il colore di sfondo alla linea, ma utilizziamo la funzione linear-gradient() su immagine di sfondo... Sebbene questa funzione serva per creare sfumature di colore, possiamo cambiare il colore specificando le percentuali che vogliamo.

Menu-sidebar li> a :: after (background-image: linear-gradient (a destra, trasparente 50,3%, # FFFA3B 50,3%);)

Metà della linea è trasparente e l'altra metà è gialla. Rendendo la dimensione dello sfondo del 200%, raddoppiamo la larghezza del nostro riquadro. Ora la parte trasparente occupa l'intera larghezza del collegamento e la parte gialla si sposta a sinistra e diventa invisibile. Modifichiamo la posizione dello sfondo al passaggio del mouse di -100%. La parte gialla è ora visibile e la parte trasparente è nascosta.

Puoi usare qualsiasi altro colore invece della parte trasparente. Puoi anche sperimentare con i gradienti.

Ciascuno degli elementi che abbiamo considerato funziona nel suo insieme. Puoi creare un menu di questo tipo utilizzando qualsiasi design del sito dalla raccolta TemplateMonster. Come puoi vedere, farlo è più facile di quanto tu possa immaginare. Buona fortuna con la creazione di siti Web professionali e di facile utilizzo!

Per scrivere la navigazione sotto forma di menu a discesa verticale in jQuery con un elenco a discesa di sottocategorie, è necessario comprendere il principio stesso di questo meccanismo. Ma prima, diamo un'occhiata alla struttura di navigazione:

Navigazione

• Sotto 1
  • prova 1
  • prova 2
  • prova 3
  • prova 4
• Sotto 2
  • prova 1
  • prova 2
  • prova 3
  • prova 4
• Sotto 3
  • prova 1
  • prova 2
  • prova 3
  • prova 4
• Sotto 4
  • prova 1
  • prova 2
  • prova 3
  • prova 4
• sotto 5
  • prova 1
  • prova 2
  • prova 3
  • prova 4

Come avrai intuito, il nostro menu a discesa è basato su elenchi puntati. Al passaggio del mouse su un tag

Sotto 1...

tutto ciò che è incluso in esso sarà rivelato, vale a dire:

• prova 1
• prova 2
• prova 3
• prova 4

Ma come, chiedi? Sì, in realtà è tutto molto semplice. Per prima cosa, diamo un'occhiata al nostro foglio di stile dell'elenco di navigazione, che assomiglia a questo:

Corpo (sfondo: rgb (244, 244, 244); font-family: Verdana; font-weight: 100;) / * --- Navigation --- * / #menu (width: 200px; margin: 0; padding: 2px;) #menu li (list-style-type: nessuno;) .menu (position: relativo; background: chocolate; background: -moz-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3) ; background: -webkit-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); background: -o-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); border : 1px solid # 2AC4B3;) .menu: hover (background: # 00c; background: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient ( top, rgb (230, 230, 230), # 0CBFAB); background: -o-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB);) .menu span (larghezza: 11px; altezza: 11px; display: block; position: assoluto; top: 8px; right: 10px; cursor: pointer;) .menu ul (larghezza: 150px; margin: 0; padding: 1px; position: assoluto; top: -1px; left: 198px;) .menu ul li (sfondo: cioccolato; sfondo: -moz-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); sfondo: -webkit-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); sfondo: -o-linear-gradient (top, rgb (198, 255, 242), # 2AC4B3); bordo: 1px solido #fff; ) .menu ul li: hover (background: # 00c; background: -moz-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB); background: -webkit-linear-gradient (top, rgb ( 230, 230, 230), # 0CBFAB); background: -o-linear-gradient (top, rgb (230, 230, 230), # 0CBFAB);) .menu a (padding: 5px; display: block; text- decorazione: nessuna; colore: bianco;) .menu a: hover (colore: bianco;) / * --- END --- * /

Dal foglio di stile, puoi vedere che l'elenco a discesa non è inizialmente nascosto, ma correggeremo questo punto con:

$ (document) .ready (funzione () ($ (". menu ul"). hide (); $ (". menu span"). css ("sfondo", "url (" down.png ")") ; $ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); / * Equivalente a $ ("ul", this) .show (); * / $ (this) .find ("span"). css ("background", "url (" right.png ")"); / * Equivalente a $ ("span", this) .css ("background", "url ("right.png") "); * /), function () ($ (this) .children (" ul "). hide (); / * Equivalente a $ (" ul ", this) .hide (); * / $ (questo) .find ("span"). css ("sfondo", "url (" down.png ")"); / * $ ("span", questo) .css ("sfondo ", " url ("down.png") "); * /))))

Ora diamo un'occhiata più da vicino al codice del menu a discesa jQuery, perché forse non sarà del tutto chiaro a qualcuno. All'inizio, viene enunciata la seguente costruzione:

$ (documento) .ready (funzione () ())

Contiene i comandi che devono essere eseguiti dopo che la pagina è stata caricata completamente. Questo viene fatto in modo che non compaiano tutti i tipi di errori, se è impossibile trovare qualsiasi oggetto a causa del fatto che non è stato ancora caricato in modo banale.

$ (". menu ul"). nascondi ();

Cosa significa questa voce? La costruzione "$ ()" consente di selezionare gli elementi. Pertanto, all'inizio, dobbiamo nascondere il nostro elenco a discesa. Prendiamo la costruzione "$()" e scriviamo l'oggetto che ci interessa. Nel nostro caso, questo oggetto sarà un elenco puntato con la classe "menu". Successivamente, scriviamo il metodo "hide()", che ci consente di nascondere l'oggetto che ci interessa.

$ (". menu span"). css ("sfondo", "url (" down.png ")");

Cosa fa? Cerca un tag il cui elemento genitore è assegnato alla classe "menu" e, utilizzando il metodo "css (" background "," url ("down.png") ")", alla proprietà di stile "background" viene assegnato il valore "url (" down. png ")". "down.png" è un'icona che indica che l'elenco può essere espanso.

Poi arriva la costruzione, che amplierà la nostra lista, si presenta così:

$ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (" span "). css (" background " , "url (" down.png ")");)

Stiamo cercando un tag il cui elemento genitore è assegnato id = "menu." Poi viene il metodo "hover" e due funzioni tra parentesi. La prima funzione verrà eseguita al passaggio del cursore del mouse e la seconda verrà eseguita se il cursore del mouse lascia l'elemento di interesse.

La prima funzione dice:

$ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", "url (" right.png ")");

La costruzione "$ (this)" significa che siamo interessati all'elemento su cui stiamo attualmente passando con il mouse (questo è dall'inglese this). E abbiamo passato il mouse sopra il tag

Sotto 1….

... Successivamente, utilizzando il metodo "child (" ul ")" per il tag, cerchiamo il tag nidificato e lo visualizziamo utilizzando il metodo "show()".

Successivamente, stiamo cercando i discendenti del tag, vale a dire: il tag e cambia il suo sfondo in un'altra icona.

Successivamente, viene scritta una funzione che fa tutto come era originariamente, dopo che il cursore del mouse lascia la voce dell'elenco:

Function () ($ (this) .children ("ul"). Hide (); $ (this) .find ("span"). Css ("background", "url (" down.png ")"); )

Affinché il codice jQuery scritto funzioni e il nostro menu a tendina funzioni correttamente, è necessario scaricare la libreria dal sito jquery.com e collegarla scrivendola dopo il tag di apertura corda.

Quindi questo è tutto! In conclusione, voglio notare che se il tuo sito è piuttosto pesante, forse lo script verrà lanciato troppo tardi (il sito impiegherà molto tempo per caricarsi) e gli utenti vedranno come prima si apre completamente e solo allora si nasconde , che, vedi, è molto brutto. Pertanto, è necessario spostare tutti i comandi jQuery per questa costruzione: "$ (document) .ready (function () ())". Apparirà così:

$ (documento) .ready (funzione () ()) $ (". menu ul"). hide (); $ (". menu span"). css ("sfondo", "url (" down.png ")"); $ ("# menu li"). hover (function () ($ (this) .children ("ul"). show (); $ (this) .find ("span"). css ("background", " url ("right.png") ");), function () ($ (this) .children (" ul "). hide (); $ (this) .find (" span "). css (" background " , "url (" down.png ")");))

Collegamento del nostro script deve essere trasferito dal tag fino alla fine, prima del tag di chiusura oppure puoi includere lo script subito dopo l'elenco puntato.

(Download: 314)

Al giorno d'oggi i menu di navigazione di jQuery sono più che semplici blocchi di testo con collegamenti al loro interno. In ho spiegato come puoi usare JQuery e CSS3 per creare un menu di navigazione che sembra davvero interessante.

Con la potenza di jQuery, possiamo trasformare il menu di navigazione in un menu dinamico. Sebbene attualmente solo CSS3 possa essere utilizzato per creare una navigazione dinamica, jQuery rende i menu ancora più funzionali.

Oltre alle caratteristiche dinamiche, anche il design gioca un ruolo importante. Se non altro perché questo è ciò che i visitatori vedono per primo quando visitano il tuo sito.

Se il menu non è rappresentabile, offrirà agli utenti un'esperienza utente scadente. Bel design il menu a sua volta aumenterà la qualità del tuo sito e offrirà una migliore esperienza utente.

Oggi vi presento 30 ottimi jQuery esempi Menu di navigazione.

1. Invadente

Pushy è un menu di navigazione reattivo e non telato che utilizza trasformazioni e transizioni CSS. Funziona benissimo sui dispositivi mobili. Assicurati di dare un'occhiata alla demo e ti piacerà sicuramente.

Dimostrazione | Scarica

2. Slinky

Questo è un altro ottimo menu jQuery per creare bellissimi elenchi di navigazione scorrevoli. La sua caratteristica distintiva è la piccola dimensione dei file di origine.

Dimostrazione | Scarica

3.jQuery Pop Menu

Questo è un semplice menu popup reattivo con funzionalità molto interessanti. Quando fai clic sull'icona del menu, viene visualizzata una finestra di menu con le icone degli elementi. Guarda la demo.

Dimostrazione | Scarica

4. Barre di scorrimento

Slidebars - Un framework jQuery per implementare rapidamente e facilmente gli stili delle applicazioni senza essere vincolati al canvas. Le barre di scorrimento gestiscono anche le modifiche all'orientamento e il ridimensionamento.

Dimostrazione | Scarica

5.jQuery Square Menu

Menu JQuery che visualizza un menu del sito animato quadrato utilizzando jQuery e CSS3. Scoprilo guardando la demo.

Dimostrazione | Scarica

6. Navigazione nella visualizzazione della pagina in prospettiva

Questo menu di navigazione jQuery trasforma la pagina in un menu 3D. L'idea è quella di creare un design app mobile, in cui quando fai clic sull'icona del menu, il contenuto della pagina viene spostato di lato e il menu viene portato in primo piano.

Dimostrazione | Scarica

7. SlickNav

Plugin per la creazione di menu jQuery mobili reattivi con più livelli e personalizzazione flessibile ma semplice. Compatibile con diversi browser, è possibile la navigazione da tastiera.

Dimostrazione | Scarica

8. Menu

Menu jQuery per app ancorate e non ancorate alla tela con sotto-elementi popup. Grazie alle numerose opzioni, componenti aggiuntivi ed estensioni, è possibile una personalizzazione del menu molto flessibile.

Dimostrazione | Scarica

9. Sidra

Plugin jQuery per creare menu e aggiungere facilmente funzionalità reattive. Con Sidr puoi creare vari elementi del tuo sito, nonché menu responsive.

Dimostrazione | Scarica

10.slimMenu

slimMenu è un piccolo plug-in jQuery per aiutarti a progettare menu di navigazione reattivi e a più livelli. La cosa bella è che puoi avere diversi menu e saranno tutti completamente reattivi.

Dimostrazione | Scarica

11. Navigazione orizzontale

Menu di navigazione jQuery che consente di impostare un menu orizzontale sull'intera larghezza del contenitore. Questo plugin lo rende molto facile. Inoltre, puoi implementare il supporto per IE7.

Dimostrazione | Scarica

12. FlexNav

Questo è un primo esempio mobile dell'utilizzo di query multimediali e JavaScript per creare un ottimo menu multilivello con supporto per touch screen, effetti al passaggio del mouse e navigazione da tastiera.

Dimostrazione | Scarica

13.jQuery Menu-Obiettivo

Menu jQuery che attiva gli eventi quando il mouse passa sopra la voce del menu a discesa. Perfetto per creare menu a discesa reattivi come Amazon.

Dimostrazione | Scarica

14. SmartMenu

Un plugin per menu jQuery che offre un modo semplice e intuitivo per visualizzare i menu. Crea elenchi di menu reattivi. Funziona su tutti i dispositivi!

Dimostrazione | Scarica

15. Cambio

Shifter è un plug-in jQuery mobile-first di facile utilizzo per la creazione di menu a scorrimento che scorrono dal lato destro quando si fa clic sul pulsante di attivazione. C'è solo un'opzione maxWidth per la personalizzazione. Consente di regolare la risoluzione/orientamento per i dispositivi mobili.

Dimostrazione | Scarica

16. Hamburger

Hamburger è un plug-in jQuery per la creazione di un menu a scorrimento in stile app Android con un menu a comparsa sul bordo destro dello schermo. Quando il menu viene espanso a grandezza naturale, si sovrappone all'area del contenuto ma non alla barra delle azioni.

Dimostrazione | Scarica

17. Concentrati

Focucss è un menu di navigazione jQuery che crea un menu della barra laterale non in tela con fantastiche funzioni di sfocatura che puoi utilizzare per attirare l'attenzione degli utenti sulle sezioni principali del sito e rendere meno visibili le sezioni meno utili.

Dimostrazione | Scarica

18. Cassetto

Drawer è un plug-in jQuery per la creazione di un menu animato e reattivo che scorre fuori quando si fa clic sul lato dello schermo. Potresti aver visto funzioni simili nelle applicazioni Android.

Dimostrazione | Scarica

19. Menu dati

Datmenu - jQuery premium menu adattivo con varie funzioni di animazione CSS3. La cosa fantastica di questo plugin è la capacità di personalizzazione completa usando le opzioni js.

Dimostrazione | Scarica

20.jPanelMenu

jPanelMenu è un bellissimo e moderno menu jQuery che ti consente di creare un menu di navigazione del pannello con funzioni di transizione di animazione CSS3. Lo stile jPanelMenu ricorda le versioni mobili di Facebook e Google. Il plugin può essere utilizzato per una varietà di applicazioni mobili.

Dimostrazione | Scarica

21. Menu laterale volante

Fly Side Menu è un fantastico plugin per menu di navigazione che utilizza CSS3 per creare un menu laterale con trasformazioni e transizioni 3D.

Dimostrazione | Scarica

22. PageScroll jQuery Menu Plugin

PageScroll è un menu jQuery mobile altamente personalizzabile consigliato per l'uso su qualsiasi sito Web e pagine di destinazione.

Dimostrazione | Scarica

23.Menu icona DD

DD Icon Menu è un plug-in jQuery che consente di creare un menu di icone verticali situato sul bordo dello schermo con sottomenu di menu al passaggio del mouse.

Dimostrazione | Scarica

24. Navigazione data mobile jQuery

Menu jQuery che consente la navigazione per date nell'intervallo selezionato ( settimana, mese o anno). Ideale per richiedere informazioni tramite chiamate AJAX.

Dimostrazione | Scarica

25. Navobile

Plugin del menu di navigazione jQuery che semplifica la creazione di menu mobili. Utilizza le transizioni CSS per impostare la posizione del menu sui dispositivi mobili.

Oggi vorrei fare una selezione di una generazione relativamente nuova di navigazione per il sito - menu a schermo intero... Sono utilizzati nei casi in cui la navigazione stessa non è nella pagina, c'è un solo pulsante, quando si fa clic su di esso, si apre un menu. Un principio simile può essere visto nel -framework, quando la barra di navigazione smette di adattarsi, il blocco con l'elenco delle voci di menu viene semplicemente nascosto. Al suo posto, appare un pulsante con un'immagine, di regola, di tre strisce. Quando viene premuto, il menu completo scompare. In molti siti moderni, il menu è nascosto in modo permanente anche su schermi di grandi dimensioni. Questo viene fatto per non caricare la pagina. Anche se non dovresti farlo su tutti i tuoi progetti ora. Se il menu è di secondaria importanza, puoi nasconderlo, ma se hai un sito di grandi dimensioni con una struttura complessa, è meglio non utilizzare questa opzione. Così. Abbiamo capito il principio generale del lavoro, ma questo tipo di menu è piuttosto standard, voglio qualcosa di nuovo. Non molto tempo fa, ho iniziato a notare siti in cui la navigazione non solo si interrompe, ma si apre completamente a schermo intero in una finestra pop-up... Qualcosa come i famosi pannelli scorrevoli, ma tutta questa cosa occupa l'intera area dell'area di lavoro. Gli individui hanno cominciato ad apparire dietro i siti. plugin jQuery e css3, di cui, appunto, tratta questo argomento.
Personalmente, mi piace molto questa implementazione del menu di navigazione, poiché è conveniente per gli utenti con dispositivi mobili e sembra molto impressionante su monitor di grandi dimensioni. Siti con menu a schermo intero appare sempre di più jQuery gratis anche i plugin stanno crescendo e il concetto sta gradualmente diventando una tendenza.
Così. Per la vostra attenzione 20 plugin per menu a schermo intero jQuery nella finestra popup.

Navigazione push a schermo intero

Uno dei migliori gratuiti fino ad oggi script di navigazione a schermo intero... Quando fai clic sul pulsante "Menu", viene visualizzata la navigazione e viene fornito un blocco con i contatti, questo è molto conveniente per un visitatore del sito, poiché il percorso per la chiamata diventa 1 clic in meno. Ci tengo a precisare che lo script sui dispositivi mobili diventa anche un blocco con i contatti sotto la navigazione.
Un'aggiunta molto bella al design della finestra è l'icona SVG animata. Per impostazione predefinita, ha l'aspetto di tre strisce, ma quando si fa clic l'icona si trasforma in una freccia, che indica che il menu può essere nascosto.

Navigazione animata arrotondata

Un altro molto bello script di navigazione a schermo intero jquery dagli stessi sviluppatori del plugin sopra. Questo script ha un effetto spawn molto interessante e insolito. Quando fai clic sul pulsante del menu, un'onda viene emanata dall'icona utilizzando css3 su tutto il monitor, che cresce sullo sfondo delle voci del menu. Stesso effetto coprente.
Questa navigazione funziona benissimo sui dispositivi mobili, ma dato che l'effetto estetico è piuttosto pesante, penso che rallenterà sui vecchi telefoni (non l'ho testato, quindi sarei felice se scrivessi la tua esperienza nei commenti).

Navigazione vista pagina in prospettiva

Un altro spettacolare script del menu a schermo intero... Quando si preme il pulsante del menu, la parte visibile della pagina si sposta di lato con l'effetto, viene visualizzato un menu nello spazio liberato. Ci sono diversi effetti di animazione di spawn.
Purtroppo acceso cellulare non funziona correttamente: se ci sono molte voci di menu e non si adattano allo schermo, lo scorrimento verticale non viene visualizzato e la navigazione viene semplicemente interrotta.

Introduzione e navigazione a pagina intera

Abbastanza semplice script del menu a schermo intero... Non posso dire che sia molto efficace, ma sarà conveniente sui dispositivi mobili.

Menù laterale al volo

uno in più menu a schermo intero, in cui la parte visibile con effetto 3D viene spostata di lato, ma da altri sviluppatori. A differenza del precedente script simile, questo dovrebbe funzionare bene sui dispositivi mobili, poiché se il menu non si adatta allo schermo, viene visualizzato lo scorrimento verticale.

Con l'aiuto del classico jQuery, sono stati scritti un sacco di articoli su questo argomento. Ho cercato di complicare un po' il compito aggiungendo la possibilità di mantenere le sezioni del menu aperte (o chiuse, a seconda della scelta dell'utente) durante la navigazione del sito.
Per risolvere questo problema, ho deciso di utilizzare il plugin jQuery Cookie. Il vantaggio di questo plugin è che l'operazione viene eseguita sul lato client, il che, a sua volta, riduce il carico sul server. Meno - se l'utente ha disabilitato JS, il plugin non funzionerà. Ma non considero questa opzione, poiché quindi l'intero significato del menu a discesa scompare del tutto. Quindi, cominciamo.
Per prima cosa, dobbiamo connettere il framework jQuery stesso e plugin jQuery Biscotto:

Codice: HTML

Il prossimo è il markup. Sembrerà un semplice elenco, niente di soprannaturale. L'unica cosa da notare è che nel tag

dovrebbe esserci un titolo, quando fai clic su cui il menu verrà eliminato:

Codice: HTML

Primo titolo

• Primo collegamento


• Secondo collegamento


• Terzo link

Secondo titolo

• Primo collegamento


• Secondo collegamento


• Terzo link

Terzo titolo

• Primo collegamento


• Secondo collegamento


• Terzo link

Quarto titolo

• Primo collegamento


• Secondo collegamento


• Terzo link

E così via all'infinito. Ora arriva la parte divertente. Aggiungerò alcuni commenti nel codice per renderlo più o meno chiaro, chopach

Codice: JS

$ (documento) .ready (funzione () (
if ($. cookie ("num_open_ul")) (// controllato se c'è una voce nei cookie
if ($. cookie ("num_open_ul")! = 0) (// e questa voce non è uguale a 0
var number_eq = parseInt ($. cookie ("num_open_ul") - 1);
$ (". navigation_body"). eq (number_eq) .show (). prevAll ("# navigation h2.navigation_head: first"). addClass ("active_navigation");
}
};
$ ("# navigazione h2.navigation_head"). click (function () (// quando si fa clic questa funzione verrà attivata
if (! $ (questo) .next (). è (": visibile")) (
$ ("div.navigation_body"). fratelli ("div.navigation_body"). slideUp (500); // se altri sono aperti, chiudi tutto tranne quello corrente
}
$ (this) .next ("div.navigation_body"). slideToggle (500) .siblings ("div.navigation_body"). slideUp (500);
$ (this) .toggleClass ("active_navigation") fratelli ("# navigation h2.navigation_head") removeClass ("active_navigation"); // ha aggiunto una classe al pubblico per cambiare lo stile
setTimeout (fncookie, 600); // scrivendo sui cookie stessi con un ritardo, in modo che lo script abbia il tempo di completare il lavoro prima della registrazione (500 ms - velocità, ritardo - 600 ms)
});
function fncookie() (// la funzione di scrittura stessa
var numero_open_ul = 0;
variabile i = 0;
$ ("div.navigation_body"). each (funzione () (
io++;
if ($ (questo) .is (": visibile")) (
numero_aperto_ul = io;
}
$ .cookie ("num_open_ul", numero_open_ul, (scadenza: 3, percorso: "/")); // conserva 3 giorni per l'intero sito.
});
}
});

Cioè, ora, se l'utente ha aperto il menu, ha lasciato il sito e ci è tornato dopo un paio di giorni, il menu rimarrà comunque aperto per lui.
E infine, ci rimane un piccolo tocco: in effetti, css-styles. Puoi farlo a tuo piacimento, nell'esempio ho preso il design finito da uno dei progetti

Codice: CSS

#navigazione (
margine: 80px automatico;
larghezza: 250 px;
}
#navigazione h2, #navigazione h2.navigation_head (
dimensione del carattere: 18px;
font-weight: più audace;
colore di sfondo: # ffb6c1;
background-image: -webkit-gradient (lineare, 50% 0,50% 100%, color-stop (0%, # ffe9e9), color-stop (100%, # ffb6c1));
background-image: -webkit-linear-gradient (# ffe9e9, # ffb6c1);
background-image: -moz-linear-gradient (# ffe9e9, # ffb6c1);
background-image: -o-linear-gradient (# ffe9e9, # ffb6c1);
background-image: linear-gradient (# ffe9e9, # ffb6c1);

imbottitura: 5px 3px 6px 3px;
margine: automatico;
posizione: relativa;
}
#navigation h2.navigation_head: dopo (
posizione: assoluta;
a destra: 5px;
colore: # 550000;
contenuto: "cssb";
}
#navigation h2: hover, #navigation h2.navigation_head: hover (
cursore: puntatore;
}
.active_navigation (
background-image: -webkit-gradient (lineare, 50% 0,50% 100%, color-stop (0%, # ffb6c1), color-stop (100%, # ffe9e9)) importante;
background-image: -webkit-linear-gradient (# ffb6c1, # ffe9e9)! importante;
background-image: -moz-linear-gradient (# ffb6c1, # ffe9e9)! importante;
background-image: -o-linear-gradient (# ffb6c1, # ffe9e9)! importante;
background-image: linear-gradient (# ffb6c1, # ffe9e9)! importante;
}
.active_navigation: dopo (
posizione: assoluta;
a destra: 5px;
contenuto: "cssd"! importante;
}
.navigation_body (
display: nessuno;
}
#navigazione ul (
margine: 0;
imbottitura: 0;
list-style-type: nessuno;
}
* html #navigazione ul li (
altezza: 1%;
}
#navigation div.navigation_body ul li (
margine sinistro: 10px;
}
#navigazione a (
font-family: "Times New Roman";
blocco di visualizzazione;
colore: # 918871;
imbottitura: 3px;
colore di sfondo: # ffe3e0;
bordo-basso: 1px solido #fff;
decorazione del testo: nessuna;
}
#navigazione a: hover (
colore: # 585858;
colore di sfondo: # ffb6cc;
}

Se qualcuno se ne è accorto, qui ho provato a usare la proprietà content: +/- quando il menu è chiuso/aperto, ma puoi aggiungere un'immagine o qualsiasi altra costruzione. Puoi vedere un esempio di ciò che abbiamo ottenuto qui.

Come sempre, sono pronto ad ascoltare le domande e cercare di rispondere. Tutto il meglio, tutto il meglio.