Come costruire una navigazione fuori tela con jQuery.mmenu

Questo tutorial ti farà fare un rapido tour di jQuery.mmenu, un plugin jQuery che aiuta a creare una navigazione estesa del tuo sito. Mentre lo esaminiamo, vedremo come possiamo utilizzare questo plug-in per creare da zero un menu off-canvas.

Cos'è jQuery.mmenu?

Per la migliore descrizione di jQuery.mmenu, andremo alla sua pagina Github:

"Il miglior plug-in di jQuery per i menu on-and off-canvas simili alle app con sottomenu scorrevoli per il tuo sito web e la tua webapp.

Il plugin jQuery.mmenu è altamente personalizzabile e viene fornito con molti add-on (ad esempio contatori e divisori) più estensioni (ad esempio effetti e ombre di pagina). Per coloro che preferiscono, è disponibile come plugin per Wordpress e funziona bene in una vasta gamma di browser!

Inizia con jQuery.mmenu

Per cominciare, dovrai prendere una copia della biblioteca. Questo può essere fatto visitando la sua pagina ufficiale, attraverso un gestore di pacchetti (ad es. Bower) o un CDN (ad es. Cdnjs).

Una volta scaricato, dovrai includere i file CSS e JS necessari nelle tue pagine. 

Si noti che a seconda del menu che si desidera creare, potrebbero essere necessarie risorse diverse. Ad esempio, un menu fuori quadro richiede il jquery.mmenu.css (o la sua versione minificata) e jquery.mmenu.js (o la sua versione minificata) file. Se desideri modificare il comportamento predefinito del menu (ad esempio, sposta la sua posizione a destra), dovrai includere anche i file correlati al componente aggiuntivo "off-canvas". Se questo sembra confuso e non vuoi preoccuparti di quali sono i file richiesti, vai avanti e usa i file "tutti" (ad es.. jquery.mmenu.all.css e jquery.mmenu.min.all.js ) nei tuoi progetti.

Nella nostra demo, importeremo i file "tutti" tramite un CDN. Il capo elemento della nostra pagina farà riferimento al file CSS "tutti":

Allo stesso modo, inseriremo lo script "all" (e una copia di jQuery) prima della chiusura etichetta:

Quindi, iniziamo a costruire il menu!

Impostazione dell'HTML

Iniziamo comprendendo la struttura della nostra pagina. Ecco il codice HTML corrispondente:

Si noti che inseriamo tutti gli elementi, ad eccezione di nav elemento, all'interno di un contenitore div. 

Possiamo usare un elemento diverso come contenitore, ma così facendo dovremmo quindi informare il plugin su questa modifica tramite la relativa proprietà di configurazione (ad es. offCanvas.pageNodetype proprietà). Inoltre, se possibile, dovremmo evitare di dichiarare un numero di proprietà CSS per l'elemento wrapper. Più specificamente, il plugin raccomanda quanto segue:

"Questo DIV è il migliore senza una (min / max) larghezza e altezza, padding, bordo e margine."

Il markup

Il prossimo passo è dare un'occhiata più da vicino alla struttura del menu. Il codice HTML pertinente assomiglia a questo:

Qui abbiamo usato un semplice codice HTML per creare il nostro menu. Elenchi non ordinati, con elenchi e collegamenti annidati. Il plug-in non prevede un markup specifico; felicemente, siamo in grado di utilizzare qualsiasi markup che vogliamo. 

Assegniamo un identificatore univoco al menu, che useremo in seguito per istanziare il plugin. Quindi, ultimo ma non meno importante, lo nascondiamo fino a quando tutti gli stili sono stati applicati con successo. Questo passaggio è importante perché, aggiungendo il seguente codice CSS, evitiamo un FOUC stridente:

nav display: none; 

Ora che abbiamo preparato la nostra pagina, è ora di inizializzare il menu!

Sparare il plugin

Prima di mostrare come possiamo attivare il plug-in, carichiamo prima alcuni dei nostri selettori: 

var $ menu = $ ('# menu'); var $ btnMenu = $ ('. btn-menu'); var $ img = $ ('img');

Ora inizializziamo usando il codice qui sotto:

$ menu.mmenu (// impostazioni di configurazione qui);

Possiamo personalizzare l'aspetto predefinito e la funzionalità del nostro menu tramite CSS e le impostazioni di configurazione disponibili. Vedremo alcuni esempi di questo in un momento.

Inoltre, abbiamo la possibilità di aprire e chiudere il menu automaticamente o manualmente. Nel nostro caso, mostreremo il menu quando l'elemento con btn-menu la classe viene cliccata. Per ottenere questa funzionalità, trarremo vantaggio dall'API disponibile. Ecco il codice richiesto:

var api = $ menu.data ("mmenu"); $ btnMenu.click (function () api.open (););

Al contrario, sceglieremo di nascondere il menu automaticamente. Questo è il comportamento predefinito; attivato quando facciamo clic su qualsiasi parte della pagina, ad eccezione della parte che appartiene al menu.

Prima di andare avanti, c'è un'altra cosa che dovrei menzionare. Se proviamo ad aprire un sottomenu facendo clic sulla voce del menu di destinazione (un elemento), questo elemento non sarà interamente cliccabile. Nello specifico, il sottomenu si aprirà solo quando clicchiamo sulla parte destra di quella voce di menu (vedi l'esempio dal vivo per capire questo comportamento). Per rendere il intero voce di menu cliccabile, dobbiamo aggiungere la seguente riga di codice:

$ menu.find (".mm-next") .addClass ("mm-fullsubopen");

Modifica dell'immagine Off-Canvas

In questa sezione, l'obiettivo è mostrare un'icona di navigazione diversa a seconda dello stato del nostro menu. Lo screenshot qui sotto visualizza ciò che vogliamo ottenere: 

I due stati icona

Per farlo, lavoreremo con il apertura e chiusura eventi. Puoi trovare la documentazione di quegli eventi nella pagina relativa al componente aggiuntivo "offCanvas". Ecco lo snippet che usiamo per cambiare le icone:

api.bind ('opening', function () $ img.attr ('src', 'arrows_remove.svg');); api.bind ('closing', function () $ img.attr ('src', 'arrows_hamburger.svg'););

Oltre agli eventi di cui sopra, ci sono anche alcuni altri con cui giocare (ad es ha aperto e chiuso eventi) che potresti trovare utile per i tuoi progetti.

Modifica della larghezza predefinita

Per cambiare la larghezza predefinita del menu, possiamo usare CSS o Sass (modificando i file sorgente). Di default, è suo min-width e larghezza massima i valori delle proprietà sono uguali a 140px e 440px rispettivamente. Nella nostra demo, vediamo come possiamo cambiare l'iniziale larghezza massima valore della proprietà tramite CSS. Di seguito sono elencate le regole CSS che devono essere sovrascritte:

.mm-menu larghezza massima: 350 px;  / ** * aggiungi più prefissi dei fornitori * a seconda dei browser che hai scelto come target * / @media all e (min-width: 550px) html.mm-opening .mm-slideout transform: translate (350px, 0) ;  / ** * sostituisce questa regola * nel caso tu stia creando un menu a destra * / @media all e (min-width: 550px) html.mm-right.mm-opening .mm-slideout transform: translate (-350px, 0); 

Modifiche CSS aggiuntive

A questo punto, continueremo a personalizzare l'aspetto del menu. Di nuovo, modificheremo il file sorgente di Sass per modificare gli stili in base alle nostre esigenze. Dai un'occhiata alle regole che verranno sovrascritte di seguito (per semplicità ho omesso i valori delle variabili Sass): 

.mm-menu background: darken ($ main-color, 10%);  .mm-listview> li> a color: $ text-color; imbottitura: 20px;  .mm-listview> li> a: hover, .mm-listview .mm-next.mm-fullsubopen: hover + a color: $ highlight-color;  .mm-listview> li> a: hover span color: $ text-color;  .mm-menu .mm-listview> li.mm-selected> a: not (.mm-next) background: transparent url (arrows_check.svg) no-repeat center right 10px; dimensione di sfondo: 30px 30px; text-decoration: line-through; 

Ora considera l'ultima regola. Ogni volta che clicchiamo su una voce di menu, riceve il mm-selezionato classe, quindi possiamo usare quel selettore per modellarlo. Ma vogliamo solo modellare l'ultimo elemento in un processo di selezione, quindi indicheremo quelli che non hanno la classe mm-next. 

"Informazioni" porta al sottomenu sulla destra, ma abbiamo solo stilizzato l'ultimo link cliccato

Aggiunta di estensioni e componenti aggiuntivi

In una sezione precedente, abbiamo visto come inizializzare il plugin. Ora, estendiamo il suo comportamento e funzionalità sostituendo le opzioni di configurazione predefinite. 

Innanzitutto, cambiamo il titolo che appare sopra il pannello principale. 

Successivamente, includiamo i componenti aggiuntivi "contatori" e "off-canvas". Quest'ultimo add-on ci consente di modificare la posizione del menu rispetto alla pagina. 

Infine, aggiungiamo tre estensioni. Controlla il codice di inizializzazione finale di seguito: 

$ menu.mmenu (counters: true, barra di navigazione: title: "Contenuto del menu", estensioni: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"], offCanvas: position: "right", zposition: "back");

Conclusione

In questo tutorial, abbiamo esaminato il processo di creazione di un menu off-canvas utilizzando il plug-in jQuery.mmenu. Come passo successivo, scavare nella fonte completa per la nostra demo su CodePen. Quindi, ti suggerisco di entrare nella pagina ufficiale di jQuery.mmenu e guardare i vari esempi interattivi disponibili. Mostraci i tuoi esempi nei commenti!

Se stai cercando una soluzione rapida, non dimenticare che Envato Market ha una collezione di diversi menu CSS o JavaScript e widget di navigazione. È un buon punto di partenza per idee ed esempi.