avec un identifiant de "fade" qui sera notre couverture noire qui assombrit le contenu lorsque l'utilisateur clique sur l'icône du menu.
Enfin, nous appelons jQuery depuis Google et notre propre fichier de script, où nous travaillerons un peu. Mais passons d'abord par les styles.
Styling avec CSS
Nous ne passerons donc pas en revue tous les styles CSS (si vous voulez que vous puissiez inspecter ou afficher la source sur la démo), car ils sont en grande partie utilisés pour le style général de la page, ce qui n'est pas le but. de cet article. Nous allons casser et examiner quelques morceaux de code qui sont importants pour l'effet. Donc tout d'abord:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
Nous allons commencer en veillant à ce que si le navigateur de l'utilisateur ne dispose pas de JavaScript (qui est le nom de la classe sur l'élément HTML que nous avons vu précédemment en utilisant Modernizr), nous afficherons le # fallback-nav dans l'en-tête et nous cacherons la #fade DIV ainsi que l’icône de navigation. Il s’agit de notre solution de rechange, de sorte que le menu de secours doit être stylé de manière plus traditionnelle. Nous cachons également cette solution si JavaScript est disponible, comme vous pouvez le voir dans la dernière ligne.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
Donc, dans cette section, nous stylisons notre icône de menu dans l’en-tête, c’est assez simple, en lui donnant simplement une position relative et un z-index élevé (qui sera utile plus tard lorsque le reste du contenu Haut). Nous changeons également la couleur en blanc quand il y a une classe "open" que nous allons ajouter et enlever en utilisant jQuery. On peut également voir que le simple div avec un identifiant de "fade" s'étire pour remplir tout l'écran et se remplir d'un noir plein avec une transparence de 50%. Si l'utilisateur n'a pas de code JavaScript, ce filtre noir sera masqué, sinon nous le cacherons avec jQuery. Regardons maintenant le menu lui-même:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
Donc le dernier mais non le moindre, le menu principal. Je dois tout d’abord ajouter qu’il s’agit du code simplifié qui nécessiterait plusieurs préfixes de fournisseurs avant d’être compatible avec tous les navigateurs. Pour ce faire, je recommande d'utiliser un outil génial comme Autoprefixer pour ajouter tous les préfixes corrects pour vous.
Cela étant dit, regardons ce que cela implique: tout d’abord, il ya un positionnement fixe en haut de cette page et 250px négatifs à droite. Cela signifie qu'il est là, mais juste "off-screen" (car il a une largeur maximale de 250px). La hauteur est également de 100%, de sorte qu’elle remplit toute la fenêtre de haut en bas. Le menu nécessite également un index z entre 0 et 9 (au-dessus du filtre noir). Ensuite, voici que la magie se produit, elle a un affichage: flex; propriété, ainsi qu’une autre propriété liée de «flex-direction» (que nous avons définie sur «column» ici au lieu de «row» par défaut, ce qui signifie que l’élément flex children-les liens dans le menu remplissent toute la hauteur de son parent à parts égales).
Donc, tout le monde a ciblé le menu titulaire # main-nav, puis lors de la mise en forme des liens, nous leur donnons une valeur de flex de 1. C'est ce qui fait que les liens remplissent également toute la hauteur. Ensuite, ces liens reçoivent également une valeur d'affichage de «flex», ce qui signifie que tous les éléments à l'intérieur des liens seront affectés par cela. Nous nous assurons que la flex-direction est toujours "column" et ensuite nous ajoutons une propriété de "explain-content: center;". Cela rend le texte lui-même à l'intérieur des liens centrés verticalement (c'est pourquoi il y a des divs à l'intérieur du ![]()
balises du # main-nav, qui n'est pas exactement sémantique mais constitue un moyen très rapide et facile de centrer verticalement les éléments.
Maintenant, nous ne pouvons plus rien voir, nous devons maintenant ajouter notre fonctionnalité avec notre propre fichier scripts.js que nous avons appelé plus tôt.
Ajout de la fonctionnalité avec jQuery
Le script de cet effet est très petit et simple, mais je vais tout mettre ici en premier et ensuite expliquer ce qui se passe:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} , 400) .css ({"overflow": "hidden"}); $ ('# main-nav'). Animer ({right: "0"}, 400); $ (this) .removeClass ('closed' ) .addClass ('open') .html ('x'); $ ('# fade'). fadeIn (); } else if ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} , 400) .css ({"overflow": "scroll"}); $ ('# main-nav'). Animer ({right: "-250px"}, 400); $ (this) .removeClass ('open ') .addClass (' closed '). html (' ☰ '); $ (' # fade '). fadeOut (); }});});
Donc, tout d'abord, nous cachons le filtre noir. Ensuite, tout ce que nous faisons sera contenu dans une fonction attachée à un événement de clic lié au lien de l'icône de menu. Lorsque vous cliquez dessus, nous avons deux cas ou situations différents. l'un est lorsque le menu est déjà caché (comme l'état par défaut) ou un lorsque le menu est affiché. Ainsi, le lien d'icône de menu a un nom de classe fermé que nous avons ajouté, et nous avons également créé un style ouvert. Notre première déclaration "if" est que si le lien est fermé (donc par défaut). Si tel est le cas, alors le tout
L'élément est animé 250px à gauche et arrête le défilement de la page. Le # main-nav div est aussi en cours d'animation, nous changeons sa valeur de -250px à 0. Ensuite, nous supprimons la classe 'closed' du lien et en ajoutons un de 'open' ainsi que changer le html du caractère spécial de trois lignes à un "x". Enfin, nous sommes en train de disparaître dans notre filtre noir pour rendre le reste du contenu sombre. Et c'est tout! Cela nous donne l'état ouvert du menu.
Maintenant, l'instruction "else if" cible la classe ouverte sur le lien de menu. Lorsque c'est le cas, nous faisons le contraire de tout ce que nous avons fait auparavant, en remettant le corps en place et en déplaçant le menu à nouveau hors écran. Suppression de la classe "open" de l'icône du menu, ajout de "closed" et modification du contenu sur l'icône, ainsi que de la sortie de notre div #fade. Si tout se passe comme prévu, voici à quoi devrait ressembler la fonctionnalité:
Conclusion
Alors voilà! C'est une façon de faire de cet effet sympa que nous voyons de plus en plus maintenant avec le style de la conception de sites Web moderne, en particulier sur les conceptions mobiles. Cet effet est une solution simple et conviviale qui ne nécessite aucun plug-in et peut être entièrement adaptée aux besoins de chaque projet. Cela a également été une chance de faire usage de flexbox ainsi que quelques autres outils utiles. Faites-moi savoir dans les commentaires s'il y a quelque chose que vous auriez fait différemment ou juste ce que vous pensiez!
Image / vignette en vedette, image de porte coulissante via Shutterstock.
