Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Front-End
Code

Création d'un menu de navigation latéral coulissant pour des concepts réactifs

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by New Lune (you can also view the original English article)

Dans ce tutoriel, vous allez créer un menu de navigation latéral extensible avec JavaScript et CSS. Le produit final apparaîtra comme indiqué ci-dessous:

Sliding Side Navigation Menu

Le balisage

Pour commencer, ajoutons un supplément pour notre menu latéral:

Ici vous pouvez voir que nous avons créé un div menu de côté avec la classe sidenav. Ensuite, nous avons ajouté la barre de navigation supérieure réelle via une balise <nav>, et nous utilisons un SVG pour notre icône de menu latéral.

L'attribut onclick de l'icône et le bouton de fermeture va déclencher certains JavaScript, que nous ajouterons ensuite.

N'oubliez pas de mettre tout le contenu de votre site Web dans le conteneur div id="main" afin qu'il glisse vers la droite.

JavaScript

Ensuite, ajoutons le JavaScript pour créer les fonctions openNav et closeNav.

CSS

Enfin, nous aurons besoin de créer notre page avec quelques CSS pour le menu latéral et nos liens:

Remarque: Le body {overflow-x: hidden;} est nécessaire pour assurer qu'un défilement horizontal n'apparaisse pas lors de l'utilisation avec votre CSS existant.

Vous pouvez maintenant jeter un oeil à votre menu et essayer dans votre navigateur.

Utilisation de jQuery

Si vous voulez créer le menu latéral JavaScript à l'aide de jQuery, vous pouvez le faire en remplaçant le JavaScript que j'ai fourni précédemment par la section suivante:

Retrait de la glissière

Pour faire apparaître le menu sans animation de diapositive, il suffit d'apporter des modifications à la transition de propriété CSS, comme indiqué sous une forme abrégée ci-dessous:

Cela fera apparaître le changement instantanément car il n'y a pas de délai spécifié dans la transition. Le défaut que nous avons utilisé est 0.5s.

Conclusion

La création d'un menu latéral ne prend que quelques lignes de code et n'a pas besoin d'utiliser beaucoup de ressources. De plus, si jQuery est déjà sur la page pour d'autres tâches, le travail peut être effectué avec un peu moins de lignes de code et personnalisation.

Faire le code réagissant pour travailler avec différentes résolutions d'écran de dispositif est simplement un cas de modifier le CSS en ajoutant des requêtes de médias pour les cas spécifiques.

Pour aller plus loin, vous pouvez choisir votre style avec un framework CSS tel que Bootstrap ou Bulma.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.