In questo tutorial vedremo come creare un menù di navigazione a comparsa verticale che comparirà cliccando sul relativo bottone, scurendo il resto della zona visibile del sito web. Il menù sarà inoltre responsive verticalmente, riempiendo l’altezza della finestra del browser su qualunque dimensione di schermo.

Per far ciò useremo la proprietà flexbox, colei che sta sempre più regnando nel mondo del web design. La useremo per far si che il menù si estenda in tutta l’altezza della finestra. Useremo inoltre jQuery, facendo si che il menù di navigazione esca all’evento del click, con una scappatoia per gli utenti che non hanno JavaScript abilitato nel browser.

Qui troverete le demo online di come si vedrà il menù alla fine del tutorial. E da qui invece potete scaricare l’intero codice sorgente.

INIZIAMO CON IL MARKUP

Diamo un’occhiata al codice HTML della pagiona che useremo nella demo. Guarderemo successivamente le singole parti:

L’unica cosa da notare nel tag <head> è il richiamo qualche font da Google Fonts. Abbiamo il link al nostro file css e al file modernizr.js (che potete scaricare da qui) usato per individuare se l’utente ha javaScript abilitato o meno (ecco spiegata la presenza della classe ‘no-js’ nel tag HTML, per far apparire una pagina differente nel caso di JavaScript disabilitato).

Altre cose più interessanti invece sono il nostro menù di ripiego, ovvero il tag <ul> con l’id ‘fallback-nav’ nel tag <header>, il link con id ‘navicon’ usato per creare il nostro effetto. Il <nav> con id ‘main-nav’, ovvero il menù di navigazione principale. L’ultimo elemento usato nel nostro effetto è il <div> con id ‘fade’, la copertura nera che scurirà i contenuti del sito web all’apertura del menù.

Infine chiamiamo jQuery da Google e lo script js che contiene l’animazione.
Vediamo ora il CSS.

STILE CSS

Non guarderemo tutto il CSS, che contiene per la maggior parte lo stile generale della demo, ma alcune parti importanti necessarie per il corretto funzionamento del menù di navigazione. Iniziamo:

Assicuriamoci innanzitutto che all’utente venga mostrato il menù #fallback-nav nell’header nel caso di JavaScript disabilitato, nascondendo il div #fade e l’icona del menù. Ecco perchè il #fallback-nav deve essere disegnato in un modo pià tradizionale. Nascondiamo inoltre questa soluzione nel caso di JavaScript abilitato, come potete vedere nell’ultima riga.

In queste sezione scriviamo lo stile per l’icona del menù. Cambiamo inoltre il colore in bianco quando viene aggiunta la classe ‘open’, azione svolta da jQuery. Il div con id ‘fade’ occuperà l’intero spazio della finestra, con un colore di riempimento nero al 50%. Niente di complicato.

Passiamo al menù:

Ultimo ma non meno importante il menù principale. A parte la parte relativa al posizionamento che non richiede una spiegazione, la magia vera e propria avviene nella riga del “display:flex;” e “flex-direction:column;“, proprietà che si occupano di estendere il nostro menù in verticale, invece che nella tradizionale direzione orizzontale di default.

La proprietà “flex:1;” dei link invece si occupa di estendere i link per l’intera altezza in maniera equilibrata. Diamo inoltre al link stesso la proprietà flex, per far si che gli elementi al loro interno ne sia affetti. “justify-content:center;” si occuperà di centrare i nostri contenuti.

TOCCA A JQUERY

Lo script usato per questo esempio è davvero piccolo e semplice. Di seguito il codice con relativa spiegazione:

Prima di tutto nascondiamo l’overlay nero. Tutto ciò che viene dopo è contenuto in una funzione legata all’evento di click sull’icona del menù. Quando questo viene cliccato abbiamo due possibili situazioni: la prima è quando il menù è già nascosto (lo stato di default), la seconda è quando il menù è visibile. Il tutto inizia con una if, che controlla che l’icona del menù abbia o meno una classe ‘closed‘. Se ciò è vero, viene applicata l’animazione di comparsa del menù, la rimozione della classe ‘closed‘ e l’aggiunta della classe ‘open‘ e viene fatto apparire con un effetto di fade l’overlay nero. Altrimenti, se l’icona del menù ha la classe ‘open‘ (entriamo nella else if), viene fatto il procedimento contrario, per far scomparire il menù e l’overlay nero assieme all’inversione di classe nell’icona del menù.

CONCLUSIONI

Una soluzione semplice e decisamente leggera dal punto di vista del codice, per proporre un menù originale e moderno. Ovviamente ogni parte del codice è modificabile a vostro piacere, per rispecchiare le esigenze del vostro progetto!

16 consigli per aumentare il traffico e le visite al tuo Sito Web

LASCIA UN COMMENTO