Come creare un menu Off-Canvas con CSS e un tocco di JavaScript

In questo tutorial passeremo attraverso un metodo semplice ma efficace per la creazione di un menu off-canvas con HTML, CSS e JavaScript.

Per avere un'idea iniziale di ciò che costruiremo, dai un'occhiata alla relativa demo CodePen (controlla la versione più grande per un'esperienza migliore):

Nota: Questo tutorial non si focalizzerà su come rendere accessibile o reattivo il menu fuori-quadro, quindi quelli sarebbero sicuramente i prossimi passi validi.

1. Inizia con il markup

Il nostro markup consiste di due elementi wrapper:

• il .top-banner elemento
• il .top-nav elemento

Ecco il codice HTML:

2. Successivamente abbiamo bisogno di alcuni CSS

Con la marcatura pronta, esaminiamo gli stili più importanti che sono richiesti per il nostro menu.

Nota: Per motivi di leggibilità, questo codice CSS non è ottimizzato: noterai proprietà duplicate che potresti voler eliminare nella tua versione.

Disegnare l'elemento top-banner

Il .top-banner l'elemento è simile a questo:

Per quanto riguarda i suoi stili, facciamo quanto segue:

• Imposta la sua larghezza uguale alla larghezza della finestra meno la larghezza del .menù-wrapper elemento.
  
• Imposta la sua altezza uguale all'altezza della finestra.
• Definirlo come un contenitore flessibile. Questo costringerà la sua sovrapposizione a coprire l'intera altezza del genitore.
• Utilizzare la casella flessibile per centrare verticalmente il contenuto della sovrapposizione.

Ecco gli stili di cui avremo bisogno per ottenere tutto ciò: 

.top-banner display: flex; larghezza: calc (100% - 150px); altezza: 100 vh; transform: translateX (150px); background: url (IMAGE_PATH) no-repeat center / fixed;  .top-banner-overlay display: flex; direzione della flessione: colonna; justify-content: center; larghezza: 350 px; imbottitura: 20px; transizione: trasformare .7s; colore bianco; background: rgba (0, 0, 0, .7); 

Disegnare l'elemento top-nav

Il .top-nav l'elemento è simile a questo:

In questo caso, faremo quanto segue:

• Specificare gli elementi figlio diretti come elementi posizionati fissi che coprono l'altezza della finestra.
• Usa flexbox per allineare verticalmente il .-Menù fisso elemento.
• Nascondi il .menù-wrapper elemento per impostazione predefinita. Per fare ciò, non gli diamo un valore di proprietà come display: nessuno. In effetti, usiamo il tradurre() funzione per spostarlo di 200px a sinistra. Tieni presente che la larghezza dell'elemento è 350 px, quindi parte di essa è ancora all'interno del viewport. Tuttavia, non è visibile perché l'elemento è posizionato sotto il .-Menù fisso elemento.
• Nascondi la lista dei menu.

Dai uno sguardo agli stili CSS corrispondenti di seguito:

.top-nav .menu-wrapper position: fixed; inizio: 0; a sinistra: 0; fondo: 0; larghezza: 350 px; imbottitura: 20px; transform: translateX (-200px); transizione: trasformare .7s; sfondo: # B1FFE5;  .top-nav .menu-wrapper .menu opacità: 0; transizione: opacità .4s;  .top-nav .fixed-menu position: fixed; inizio: 0; a sinistra: 0; fondo: 0; display: flex; direzione della flessione: colonna; larghezza: 150 px; imbottitura: 20px; sfondo: acquamarina; 

3. Ora per alcuni JavaScript

A questo punto, utilizzeremo un semplice codice JavaScript per manipolare lo stato del menu fuori quadro. 

Descriviamo le azioni necessarie:

• Quando il .menu aperto viene cliccato il pulsante, il menu dovrebbe apparire con un buon effetto slide-in e l'overlay dovrebbe essere spinto simultaneamente a destra. Opzionalmente, possiamo fare molte più cose durante questo stato. Nel nostro esempio, aggiungiamo un'ombra di casella al ::prima pseudo-elemento dell'overlay e rivela l'elenco dei menu usando un effetto fade-in.
• Quando il .menu vicino viene cliccato il pulsante, il menu dovrebbe scomparire con un buon effetto slide-out e l'overlay dovrebbe essere spinto simultaneamente a sinistra.

Ecco il codice JavaScript che implementa questo comportamento:

const menuOpen = document.querySelector (". top-nav .menu-open"); const menuClose = document.querySelector (". top-nav .menu-close"); const menuWrapper = document.querySelector (". top-nav .menu-wrapper"); const topBannerOverlay = document.querySelector (". top-banner-overlay"); function toggleMenu () menuOpen.addEventListener ("click", () => menuWrapper.classList.add ("is-opened"); topBannerOverlay.classList.add ("is-moved");); menuClose.addEventListener ("click", () => menuWrapper.classList.remove ("is-opened"); topBannerOverlay.classList.remove ("is-moved"););  toggleMenu ();

E sotto troverai gli stili CSS associati:

.top-banner-overlay.is-moved transform: translateX (350px);  .top-banner-overlay.is-move :: before content: "; position: absolute; top: 0; bottom: 0; right: 100%; width: 20px; box-shadow: 0 0 10px black; .top-nav .menu-wrapper.is-opened transform: translateX (150px); .top-nav .menu-wrapper.is-opened .menu opacità: 1; ritardo di transizione: .6s;

4. Supporto per browser

Questa demo funzionerà bene solo sui browser desktop. I dispositivi mobili richiedono un layout di pagina diverso, ma questo va oltre lo scopo di questo tutorial. Come al solito, usiamo Babel per compilare il codice ES6 fino a ES5.

L'unico piccolo problema che ho riscontrato durante il test è la modifica del rendering del testo che si verifica quando viene animato l'overlay. Anche se ho provato vari approcci proposti in diversi thread Stack Overflow, non sono riuscito a trovare una soluzione semplice per tutti i sistemi operativi e browser. Quindi tieni a mente che potresti vedere piccoli problemi di rendering dei caratteri mentre viene animato l'overlay.

Conclusione

Questo è tutto, gente! Siamo riusciti a creare un utile menu off-canvas con un codice relativamente semplice. 

Spero che il risultato finale ti sia piaciuto e lo utilizzerai come fonte di ispirazione per la creazione di menu off-canvas ancora più potenti. E, naturalmente, se ne costruisci qualcuno, non dimenticare di condividerli con noi!

Ulteriori informazioni Tecniche fuori tela