Share
Dans ce didacticiel, vous allez créer un menu de navigation latérale extensible avec JavaScript et CSS. Le produit final apparaîtra comme indiqué ci-dessous:
Pour commencer, ajoutons du balisage pour notre menu latéral:
× À propos Caractéristiques Contactez-nous
Ici vous pouvez voir que nous avons créé un menu latéral avec la classe sidenav. Ensuite, nous avons ajouté la barre de navigation réelle via un tag, et nous utilisons un SVG pour notre icône de menu latéral.
le sur clic l’attribut de l’icône et du bouton de fermeture déclenchera du JavaScript, que nous ajouterons ensuite.
N'oubliez pas de mettre tout le contenu de votre site Web dans le div conteneur afin qu'il glisse vers la droite.
Ensuite, ajoutons le JavaScript pour que le openNav et closeNav les fonctions.
Enfin, nous devrons styliser notre page avec du code CSS pour le menu latéral et nos liens:
/ * Le menu de navigation latérale * / .sidenav height: 100%; / * 100% pleine hauteur * / largeur: 0; / * 0 width - change ceci avec JavaScript * / position: fixed; / * Reste en place * / z-index: 1; / * Restez au top * / top: 0; gauche: 0; couleur de fond: # 111; / * Black * / overflow-x: caché; / * Désactive le défilement horizontal * / padding-top: 60px; / * Place le contenu 60px du haut * / transition: 0.5s; / * Effet de transition de 0,5 seconde pour glisser dans le sidenav * / / * Le menu de navigation relie * / .sidenav à un padding: 8px 8px 8px 32px; texte-décoration: aucun; taille de police: 25px; couleur: # 818181; bloc de visualisation; transition: 0.3s / * Lorsque vous passez le curseur de la souris sur les liens de navigation, modifiez leur couleur * / .sidenav a: hover, .offcanvas a: focus color: # f1f1f1; / * Positionnez et stylisez le bouton de fermeture (coin supérieur droit) * / .sidenav .closebtn position: absolute; en haut: 0; à droite: 25px; taille de police: 36px; marge gauche: 50px; / * Style du contenu de la page - utilisez cette option si vous souhaitez déplacer le contenu de la page vers la droite lorsque vous ouvrez la navigation latérale * / #main transition: margin-left .5s; rembourrage: 20px; débordement caché; largeur: 100%; body overflow-x: hidden; / * Ajoute une couleur de fond noire à la navigation supérieure * / .topnav background-color: # 333; débordement caché; / * Style des liens dans la barre de navigation * / .topnav a float: left; bloc de visualisation; couleur: # f2f2f2; text-align: center; rembourrage: 14px 16px; texte-décoration: aucun; taille de police: 17px; / * Changer la couleur des liens en survol * / .topnav a: hover background-color: #ddd; la couleur noire; / * Ajoute une couleur au lien actif / actuel * / .topnav a.active background-color: # 4CAF50; Couleur blanche; / * Sur les écrans plus petits, où la hauteur est inférieure à 450px, changez le style du sidenav (moins de rembourrage et une taille de police plus petite) * / @ écran et (hauteur maximale: 450px) .sidenav padding-top: 15px; .sidenav une font-size: 18px; un svg transition: all .5s easy; &: hover #transform: rotation (180deg); #ico display: none; .menu background: # 000; affichage: aucun; rembourrage: 5px; largeur: 320px; @include border-radius (5px); #transition: tous les 0.5s sont faciles; un display: block; couleur: #fff; text-align: center; rembourrage: 10px 2px; marge: 3px 0; texte-décoration: aucun; arrière-plan: # 444; &: nième enfant (1) marge supérieure: 0; @include border-radius (3px 3px 0 0); &: nth-child (5) margin-bottom: 0; @include border-radius (0 0 3px 3px); &: hover background: # 555;
Remarque: Le body overflow-x: hidden; est nécessaire pour garantir l'absence de défilement horizontal lorsque vous l'utilisez avec votre CSS existant.
Vous pouvez maintenant consulter votre menu et l'essayer dans votre navigateur..
Si vous souhaitez créer le menu latéral JavaScript à l'aide de jQuery, vous pouvez le faire en remplaçant le code JavaScript fourni précédemment par la section suivante:
Accentsconagua
$ ('. topnav a'). click (function () $ ('# sideNavigation'). style.width = "250px"; $ ("# main"). style.marginLeft = "250px";); $ ('. closebtn'). click (function () $ ('# sideNavigation'). style.width = "0"; $ ("# main"). style.marginLeft = "0";);Pour que le menu apparaisse sans aucune animation de diapositive, il suffit de modifier la propriété CSS. transition, comme indiqué ci-dessous en abrégé:
.sidenav transition: 0s; #main transition: margin-left 0s;
Cela fera apparaître instantanément le changement car il n'y a pas de délai spécifié dans la transition. Le défaut que nous avons utilisé est 0.5s.
La création d'un menu latéral ne prend que quelques lignes de code et ne nécessite pas 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 personnalisé ultérieurement..
Rendre le code réactif pour fonctionner avec différentes résolutions d'écran de périphérique est simplement un cas de modification du CSS en ajoutant des requêtes multimédia pour les cas spécifiques..
Pour aller plus loin, vous pouvez styler votre menu avec un framework CSS tel que Bootstrap ou Bulma.
