Comment créer une navigation sur un canevas avec jQuery.mmenu

Ce didacticiel vous guidera dans une rapide visite de jQuery.mmenu, un plugin jQuery qui permet de créer une navigation complète sur le site Web. À mesure que nous l'examinerons, nous verrons comment nous pouvons utiliser ce plugin pour créer un menu hors-toile à partir de zéro..

Qu'est-ce que jQuery.mmenu?

Pour une meilleure description de jQuery.mmenu, nous allons passer à sa page Github:

“Le meilleur plugin jQuery pour des menus sur et hors-toile similaires à des applications, avec des sous-menus coulissants pour votre site Web et votre application Web..

Le plug-in jQuery.mmenu est hautement personnalisable et vient avec de nombreux add-ons (par exemple des compteurs et des diviseurs) plus des extensions (par exemple des effets et des ombres de page). Pour ceux qui préfèrent, il est disponible sous forme de plugin Wordpress, et cela fonctionne bien dans un large éventail de navigateurs.!

Démarrer avec jQuery.mmenu

Pour commencer, vous devrez vous procurer un exemplaire de la bibliothèque. Cela peut être fait en visitant sa page officielle, par l’intermédiaire d’un gestionnaire de paquets (par exemple Bower) ou d’un CDN (par exemple cdnjs)..

Une fois téléchargé, vous devrez inclure les fichiers CSS et JS nécessaires dans vos pages.. 

Veuillez noter que selon le menu que vous souhaitez créer, différents actifs peuvent être nécessaires. Par exemple, un menu hors-toile nécessite la jquery.mmenu.css (ou sa version abrégée) et jquery.mmenu.js (ou sa version minifiée) des fichiers. Si vous souhaitez modifier le comportement par défaut du menu (par exemple, déplacer sa position vers la droite), vous devez également inclure les fichiers associés au module complémentaire «hors-toile». Si cela semble déroutant et que vous ne voulez pas vous soucier des fichiers requis, continuez et utilisez les fichiers "tous" (c'est-à-dire. jquery.mmenu.all.css et jquery.mmenu.min.all.js ) dans vos projets.

Dans notre démo, nous allons importer tous les fichiers via un CDN. le tête L’élément de notre page référencera le fichier «all» CSS:

De la même manière, nous placerons le script “all” (et une copie de jQuery) avant la fermeture. étiquette:

Alors, commençons à construire le menu!

Mise en place du HTML

Commençons par comprendre la structure de notre page. Voici le code HTML correspondant:

Notez que nous plaçons tous les éléments, sauf le nav élément, dans un contenant div. 

Nous pouvons utiliser un élément différent en tant que conteneur, mais nous devons alors informer le plug-in de cette modification via la propriété de configuration correspondante (c'est-à-dire, offCanvas.pageNodetype propriété). De plus, si possible, nous devrions éviter de déclarer un certain nombre de propriétés CSS pour l'élément wrapper. Plus spécifiquement, le plugin recommande ce qui suit:

«Cette DIV est préférable sans une largeur et une hauteur (min / max), un rembourrage, une bordure et une marge.»

Le balisage

L'étape suivante consiste à examiner de plus près la structure du menu. Le code HTML pertinent ressemble à ceci:

Ici, nous avons utilisé du code HTML simple pour construire notre menu. Listes non ordonnées, avec des listes imbriquées et des liens. Le plugin n'attend pas de balisage spécifique; Heureusement, nous sommes en mesure d'utiliser les balises que nous voulons. 

Nous attribuons un identifiant unique au menu, que nous utiliserons plus tard pour instancier le plugin. Enfin, dernier élément, nous le cachons jusqu'à ce que tous les styles aient été appliqués avec succès. Cette étape est importante car, en ajoutant le code CSS suivant, nous empêchons les FOUC saccadés:

nav display: none; 

Maintenant que nous avons préparé notre page, il est temps d'initialiser le menu!

Lancer le plugin

Avant de montrer comment nous pouvons activer le plugin, mettons d'abord en cache quelques-uns de nos sélecteurs: 

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

Maintenant, nous l’initialisons en utilisant le code ci-dessous:

$ menu.mmenu (// les paramètres de configuration ici);

Nous pouvons personnaliser l'apparence par défaut et les fonctionnalités de notre menu via CSS et les paramètres de configuration disponibles. Nous verrons quelques exemples de cela dans un instant.

De plus, nous avons la possibilité d’ouvrir et de fermer le menu automatiquement ou manuellement. Dans notre cas, nous allons montrer le menu lorsque l'élément avec le btn-menu la classe est cliquée. Pour réaliser cette fonctionnalité, nous allons tirer parti de l'API disponible. Voici le code requis:

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

En revanche, nous choisirons de cacher le menu automatiquement. Ceci est le comportement par défaut; déclenché lorsque l'on clique sur une partie de la page, à l'exception de la partie appartenant au menu.

Avant de poursuivre, il y a une dernière chose que je devrais mentionner. Si nous essayons d’ouvrir un sous-menu en cliquant sur l’option de menu cible (une élément), cet élément ne sera pas entièrement cliquable. Plus précisément, le sous-menu ne s’ouvre que lorsque nous cliquons sur la partie droite de cet élément de menu (voir l’exemple en direct pour comprendre ce comportement). Pour faire le tout élément de menu cliquable, nous devons ajouter la ligne de code suivante:

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

Modification de l'image hors toile

Dans cette section, l'objectif est d'afficher une icône de navigation différente en fonction de l'état de notre menu. La capture d'écran ci-dessous montre ce que nous voulons réaliser: 

Les deux états d'icône

Pour ce faire, nous allons travailler avec le ouverture et fermeture événements. Vous pouvez trouver la documentation de ces événements dans la page associée au module complémentaire "offCanvas". Voici l'extrait que nous utilisons pour changer les icônes:

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

Au-delà des événements ci-dessus, il y a aussi quelques autres joueurs avec lesquels jouer (par exemple, le ouvert et fermé événements) que vous pourriez trouver utiles pour vos propres projets.

Changer la largeur par défaut

Afin de changer la largeur prédéfinie du menu, nous pouvons utiliser CSS ou Sass (en modifiant les fichiers source). Par défaut, son largeur min et largeur maximale les valeurs de propriété sont égales à 140px et 440px respectivement. Dans notre démo, voyons comment nous pouvons changer le premier largeur maximale valeur de propriété via CSS. Vous trouverez ci-dessous les règles CSS à remplacer:

.mm-menu max-width: 350px;  / ** * ajouter plus de préfixes de fournisseurs * en fonction des navigateurs que vous ciblez * / @media all et (min-width: 550px) html.mm-opening .mm-slideout transformer: translate (350px, 0) ;  / ** * annule cette règle * si vous construisez un menu de droite * / @média tous et (min-largeur: 550px) html.mm-right.mm-ouverture .mm-slideout transformer: traduire (-350px, 0); 

Modifications CSS supplémentaires

À ce stade, nous allons continuer à personnaliser l'apparence du menu. De nouveau, nous éditerons le fichier source Sass pour modifier les styles en fonction de nos besoins. Jetez un coup d'œil aux règles que nous allons remplacer ci-dessous (pour simplifier, j'ai omis les valeurs des variables Sass): 

.mm-menu background: darken ($ couleur principale, 10%);  .mm-listview> li> a color: $ text-color; rembourrage: 20px;  .mm-listview> li> a: survolez, .mm-listview .mm-suivant.mm-fullsubopen: survol + a color: $ highlight-color;  .mm-listview> li> a: hover span color: $ text-color;  .mm-menu .mm-listview> li.mm-sélectionné> a: non (.mm-suivant) arrière-plan: url transparente (arrows_check.svg) non répétée centre droite 10px; taille du fond: 30px 30px; text-decoration: ligne directe; 

Considérons maintenant la toute dernière règle. Chaque fois que nous cliquons sur un élément de menu, il reçoit le message mm sélectionné classe, donc nous pouvons utiliser ce sélecteur pour le styler. Mais nous voulons seulement appeler le tout dernier élément d'un processus de sélection, nous allons donc pointer vers ceux qui n'ont pas la classe de mm-next. 

«À propos» mène au sous-menu de droite, mais nous n'avons stylé que le dernier lien cliqué

Ajout d'extensions et de modules complémentaires

Dans une section précédente, nous avons vu comment initialiser le plugin. Maintenant, étendons son comportement et ses fonctionnalités en remplaçant les options de configuration par défaut. 

Tout d'abord, nous changeons le titre qui apparaît au-dessus du panneau principal. 

Ensuite, nous incluons les "compteurs" et les add-ons "hors-toile". Ce dernier add-on nous permet de changer la position du menu par rapport à la page. 

Enfin, nous ajoutons trois extensions. Découvrez le code d'initialisation final ci-dessous: 

$ menu.mmenu (counters: true, barre de navigation: title: "Contenu du menu", extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"], offCanvas: position: "right", zposition: "back");

Conclusion

Dans ce didacticiel, nous avons expliqué comment créer un menu hors-zone à l'aide du plug-in jQuery.mmenu. Dans l’étape suivante, explorez la source complète de notre démonstration sur CodePen. Ensuite, je vous suggère de vous rendre sur la page officielle de jQuery.mmenu et de regarder les différents exemples interactifs disponibles. Montrez-nous vos exemples dans les commentaires!

Si vous cherchez une solution rapide, n'oubliez pas qu'Envato Market propose une collection de différents menus CSS ou JavaScript et de widgets de navigation. C'est un bon point de départ pour des idées et des exemples.