con un ID di "dissolvenza" che sarà la nostra copertina nera che oscura il contenuto quando si fa clic sull'icona del menu.
Infine chiamiamo jQuery da Google e il nostro file di script, dove lavoreremo tra un po '. Ma prima esaminiamo gli stili.
Styling con CSS
Quindi non passeremo attraverso tutti gli stili CSS (se vuoi puoi controllare o 'visualizzare l'origine' sulla demo) poiché sono in gran parte utilizzati per lo stile generale della pagina, che non è l'obiettivo di questo articolo. Lo spezzeremo e osserveremo alcuni pezzi di codice che sono importanti per l'effetto. Quindi, prima di tutto:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Ci occuperemo di fare in modo che, se il browser dell'utente non ha JavaScript disponibile (ovvero il nome della classe sull'elemento HTML che abbiamo visto in precedenza con Modernizr), mostreremo il # fallback-nav nell'intestazione e nasconderemo il DIV #fade e l'icona di navigazione. Questa è la nostra soluzione di fallback, quindi il menu di fallback deve essere stilizzato in modo più tradizionale. Stiamo anche nascondendo questa soluzione se JavaScript è disponibile, come puoi vedere nell'ultima riga.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Quindi in questa sezione modifichiamo la nostra icona di menu nell'intestazione, è piuttosto semplice, basta dargli una posizione relativa e un alto indice z (che sarà utile in seguito quando il resto del contenuto verrà sfumato rimarrà su superiore). Stiamo anche cambiando il colore in bianco quando ha una classe di "open" che aggiungeremo e togliamo usando jQuery. Possiamo anche vedere che il singolo div con un id di "fade" si estende per riempire l'intero schermo e riempito con un nero solido con una trasparenza del 50%. Se l'utente non ha JavaScript, questo filtro nero verrà nascosto, altrimenti lo nasconderemo con jQuery. Ora diamo un'occhiata al menu stesso:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Quindi, ultimo ma non meno importante il menu principale. Devo innanzitutto aggiungere che questo è il codice semplificato che avrebbe bisogno di alcuni prefissi per i fornitori prima di essere compatibile con i browser. Per raggiungere questo obiettivo, ti consiglio di utilizzare uno strumento fantastico come Autoprefixer per aggiungere tutti i prefissi corretti per te.
Detto questo, diamo un'occhiata a ciò che comporta: prima di tutto ha un posizionamento fisso nella parte superiore di quella pagina e un 250px negativo a destra. Ciò significa che è lì, ma solo "fuori campo" (dato che ha una larghezza massima di 250 px). Anche l'altezza è al 100%, in modo che riempia l'intera finestra dall'alto verso il basso. Il menu richiede anche uno z-index tra 0 e 9 (sopra il filtro nero). Poi, ecco quando avviene la magia, ha un display: flex; proprietà, oltre a un'altra proprietà collegata di "flex-direction" (che abbiamo impostato su "column" qui invece che sulla "riga" predefinita, il che significa che l'elemento flex child-i link nel menu-riempiranno l'intera altezza di suo genitore in parti uguali).
Quindi questo è stato tutto il targeting per il titolare del menu # main-nav, poi, quando lo stile dei collegamenti, diamo loro un valore di flessione di 1. Questo è ciò che rende i collegamenti riempiono l'intera altezza allo stesso modo. Quindi a questi link viene anche assegnato un valore di visualizzazione di "flex", il che significa che qualsiasi elemento all'interno dei collegamenti sarà interessato da questo. Ci assicuriamo che la direzione della flessione sia ancora 'colonna' e quindi aggiungiamo una proprietà di "justify-content: center;". Questo rende il testo stesso all'interno dei collegamenti centrato verticalmente (questo è il motivo per cui ci sono div all'interno del ![]()
i tag del # main-nav, che non è esattamente semantico ma è un modo molto semplice e veloce per centrare verticalmente gli oggetti.)
Ora non possiamo ancora vedere nulla che abbiamo appena fatto, ora dobbiamo aggiungere la nostra funzionalità con il nostro file scripts.js che abbiamo chiamato in precedenza.
Aggiunta della funzionalità con jQuery
Lo script per questo effetto è molto piccolo e semplice, ma prima metterò tutto qui e poi spiegherò cosa sta succedendo:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animate ({right: "0"}, 400); $ (this) .removeClass ('closed') .) .addClass ( 'aperto') html ( 'x');. $ ( '# dissolvenza') fadeIn (); } else if ($ ('# navicon'). hasClass ('aperto')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Animate ({right: "-250px"}, 400); $ (this) .removeClass ('aperto ') .addClass (' chiuso ') html (.' ☰. '); $ (' # dissolvenza ') fadeOut (); }});});
Quindi prima di tutto nascondiamo il filtro nero. Quindi tutto ciò che facciamo sarà contenuto in una funzione associata a un evento click associato al collegamento dell'icona menu. Quando viene cliccato, abbiamo due casi o situazioni diversi; uno è quando il menu è già nascosto (come lo stato predefinito) o uno quando viene visualizzato il menu. Quindi il link dell'icona del menu ha un nome di classe di chiuso che abbiamo aggiunto, e abbiamo anche disegnato per aprire. La nostra prima affermazione "se" è che se il link è chiuso (quindi predefinito). Se è così, allora il tutto
l'elemento è animato a 250 px a sinistra e interrompe lo scorrimento della pagina. Anche il # main-nav div viene animato, stiamo cambiando il suo giusto valore da -250px a 0. Quindi stiamo rimuovendo la classe di 'closed' dal link e aggiungendo uno di 'open' così come cambiando l'html dal carattere speciale di tre linee a una "x". Finalmente stiamo sbiadendo nel nostro filtro nero per rendere oscuro il resto del contenuto. E questo è tutto! Questo ci dà lo stato aperto del menu.
Ora l'istruzione "else if" sta prendendo di mira la classe aperta sul link del menu. Quando lo fa, eseguiamo il contrario di tutto ciò che abbiamo fatto prima, spostando il corpo in posizione e spostando nuovamente il menu fuori schermo. Rimozione della classe di "Apri" dall'icona del menu, aggiunta di "chiuso" e modifica del contenuto all'icona e dissolvenza del div #fade. Se tutto procede secondo i piani questo è come dovrebbe apparire la funzionalità:
Conclusione
Quindi ce l'abbiamo! Questo è un modo per creare questo fantastico effetto che stiamo vedendo sempre di più ora con lo stile del moderno webdesign, in particolare sui design mobili. Questo effetto è una soluzione semplice e semplice che non richiede alcun plug-in e può essere completamente personalizzato in base alle esigenze di ogni progetto. Inoltre è stata la possibilità di utilizzare Flexbox e alcuni altri strumenti utili. Fatemi sapere nei commenti se c'è qualcosa che avreste fatto diversamente o solo quello che pensavate!
Immagine in primo piano / miniatura, immagine della porta scorrevole via Shutterstock.
