Créer un menu réactif avec le plugin Responsive-Nav.js

Il existe plusieurs façons de créer des menus de navigation avec une fonction réactive, c'est-à-dire qui répond avec tous les appareils sur lesquels le site Web peut être consulté.
Mais le problème est que beaucoup de ces formulaires ne sont pas entièrement compatibles avec certains navigateurs si CSS3 est utilisé pour effectuer cette tâche.
Grâce à Javascript, nous pouvons rendre ce type d'effets et d'animations beaucoup plus compatible avec les navigateurs et ainsi leur apporter le support nécessaire.
Dans ce tutoriel nous allons voir comment faire une barre de navigation entièrement responsive en utilisant le plugin Javascript Responsive Nav.
Ce plugin est open source et on peut l'utiliser dans n'importe quel projet, il est livré avec sa feuille de style pour pouvoir le personnaliser et il est totalement dépendant d'autres librairies Javascript comme jQuery.
Dans le HTML, nous n'aurons qu'à créer une liste pour utiliser le menu et lui donner un identifiant pour pouvoir le sélectionner via le script requis par le plugin.
Nous lions également le plugin Responsive Nav et le lions au document, celui-ci peut être téléchargé depuis sa page officielle ou directement sur Github, nous pouvons télécharger uniquement le fichier .js ou si vous le souhaitez vous pouvez télécharger l'intégralité du fichier .zip, pour cela tutoriel je n'utiliserai que le fichier responsive-nav.min.js.
Nous créons un site Web de démonstration que nous appelons responsive.html

 Navigation réactive

Début
À propos de
Prestations de service
Blog
Contact

Lorem ipsum douleur sit amet, consectetuer adipiscing.

Be egestas, ante et vulputate volutpat

Ensuite, nous ajouterons le css dans un fichier styles.css avec le code suivant

 corps {marge : 0 ; remplissage : 0 ; arrière-plan : # 3d3d3d; famille de polices : Arial, sans empattement ; } img {max-largeur : 100 % ; } #content {couleur de fond : # E6E6FA ; marge : 20px auto 0 ; rembourrage : 20px ; largeur : 80 % ; } #nav {couleur d'arrière-plan : # 4C76AE; } #nav ul {marge : 0; remplissage : 0 ; largeur : 100 % ; bloc de visualisation; style de liste : aucun ; } #nav ul li {largeur : 100 % ; bloc de visualisation; style de liste : aucun ; } #nav ul li a {affichage : bloc ; rembourrage : 10px 9px ; largeur : 100 % ; taille de la police : 1.1em ; font-weight : normal ; arrière-plan : # 4c76ae; couleur : # cad7ea ; texte-décoration : aucun; } #nav ul li a: hover {background: # 00567f; } .js #nav {clip: rect (0 0 0 0); hauteur max : 0 ; position : absolue ; bloc de visualisation; débordement caché; zoom : 1; } # nav.opened {max-height : 9999px ; } # nav-toggle {font-size: 1.2em; font-weight : gras ; rembourrage : 3px 9px ; marge gauche : 15 px ; texte-décoration : aucun; rayon de bordure : 3px ; couleur : #fefefe ; arrière-plan : # 4c7ab6; marge inférieure : 15 px; }

Jusqu'ici ce sera la feuille de style générale, maintenant nous allons créer une feuille de style qui adaptera le menu si l'écran est réduit à 640px ou moins, pour cela nous appliquons quelques styles au sein de la propriété Media Queries de css3 qui sera appliqué sur les appareils avec une résolution minimale de 640px. Si la résolution est plus élevée, le CSS général défini sera utilisé.

 @media screen et (min-width : 640px) {.js #nav {position : relative; } .js # nav.closed {max-height : aucun ; } # nav-toggle {affichage : aucun ; } #nav ul li a {border-right : 1px solide # 5E88BF ; bloc de visualisation; flotteur : gauche ; largeur : automatique ; arrière-plan : aucun; rembourrage : 11px 15px ; font-weight : normal ; texte-décoration : aucun; couleur : # E6E6FA ; } #nav ul li a: hover {background: # 00567f; couleur : # cad7ea ; } h1 {couleur : # 90b9a0; taille de la police : 2,5 em ; text-align : centre ; }}

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif