Mettre en place un menu responsive avec les CSS

Implémenter d'autres possibilités

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La librairie n'est pas avare de ressources. Il est également très simple d'y ajouter diverses fonctionnalités récurrentes dans la mise en place de barre de menus (état d'activité, positionnement à droite, séparateurs, etc.).
08:11

Transcription

Ici encore tout va se passer au travers des classes bootstrap que l'on va appliquer aux divers éléments afin de leur apporter des fonctionnalités supplémentaires. Ici au sein du Menu déroulant, on commence par rajouter par exemple ici 4 menus : a b c d par exemple. Et ces éléments-là on va les grouper au sein d'une coquille déjà non pas div mais ul on va les mettre au sein d'une liste. Ensuite on pourra mettre un petit a également. Par contre ici je vais mettre un multiplicateur pour expliquer que c'est à cet endroit-là que je vais associer ma jointure Je vais enregistrer, mon menu déroulant maintenant devrait s'afficher tel quel puisque il n'y a rien qui informe de masquer cet élément-là et de faire apparaître cet élément-là qu'au moment de faire un toggle, au moment où je vais survoler le titre du menu. Déjà au niveau du role ici, on se retrouve au niveau du menu puisque on est dans la partie imbriquée, il faudrait placer des menuitem pour chacun de ces éléments également. Donc ici on va dire que la classe utilisée pour cette liste déroulante ici va être un dropdown-menu en anglais tout simplement dans le texte pour dire, ici on a un élément de menu qui va être une liste déroulante et maintenant on va le piloter au-dessus par le lien, donc le lien ici si je me place à l'intérieur de ce lien, on va faire un data-toggle en disant ici tu as une permutation qui va se passer de type dropdown, et on va ajouter une classe ici, qui va permettre d'identifier cet élément comme étant le dropdown-toggle, c'est lui le déclencheur, c'est lui qui va permuter l'état de menu classique avec la liste déroulante qui va s'afficher. Et bien sûr tous ces éléments font partie d'un composant un peu plus large qui lui sera le menu dropdown, donc on va l'identifier comme dropdown. On est parti d'en bas pour remonter vers la partie haute, regardez ici je vais mettre une rupture ici volontairement, j'ai un composant dropdown qui est composé de 2 éléments, la tête qui est le déclencheur le dropdown-toggle, et la partie des données les parties d'attaque qui est le dropdown-menu, l'élément de menu. Le mode de bascule entre les 2 est un dropdown pour afficher. Alors ça pourrait à peu près être parfait ici. On va voir qu'on peut rajouter 2 petites choses. On retourne dans notre élément de menu pour le visualiser. On actualise la page. Quand je clique notre menu s'ouvre. Par contre rien ne m'indique ici que c'est un menu déroulant. On va retourner dans nos codes. On va utiliser une balise html qui n'est pas du tout obsolète, bien que souvent on pense qu'elle le soit, c'est la balise b. Je vais utiliser une balise b volontairement écartée ici, je vais simplement lui rajouter une classe qui fait partie bien entendu de la panoplie proposée par bootstrap qui est caret. Alors on peut la décoller pour pouvoir générer la balise b depuis l'éditeur de code. Cette balise caret va mettre une petite flèche qui va nous permettre d'indiquer que c'est un menu déroulant. On va vite aussi en profiter ici pour rajouter un autre élément de liste toujours pareil basé sur la panoplie en bootstrap qui va être une classe divider qui va être un test, un élément de séparation de menu. Voilà ce qui fait que quand j'actualise ma page maintenant on voit bien ce petit élément qui est apparu ici qui indique le menu déroulant et ici on a le petit diviseur qui va apparaître dans cette partie-là. Si je reviens dans ma partie burger ici, quand je clique on a bien notre menu déroulant qui apparaît , on a notre élément les diviseurs tout est apparu de manière très simple rien que au travers de classes et des quelques attributs data propres à html 5 qui vont nous permettre de pouvoir être piloté par le javascript. 2 petits derniers ajouts pour la route ici que l'on pourrait placer, c'est à dire qu'on peut avoir une classe active qui va indiquer quel est l'élément actif de ce menu ici donc si je place un class ="active" tout court cela va nous permettre d'indiquer la page qui correspond à ce menu. Et puis ce qu'on peut faire aussi par exemple c'est rajouter un autre ul li a voilà ici, et ce ul on va lui donner cette fois-ci comme classe toujours nav navbar puisque nous sommes exactement au même niveau que cet élément-là, donc navbar cette fois-ci sans oublier nav et je vais dire que c'est un navbar, on a notre corde à l'arc qui va être de dire right, vous avez compris que ça va aligner le menu sur la partie droite. Alors ici on va utiliser le menu Aide par exemple pour pouvoir positionner cet élément complètement sur la droite. On bascule dans le navigateur, on actualise, on voit bien le menu Aide qui est apparu ici, on voit bien le menu actif ici sur Accueil, par contre ce qu'on n'a pas, c'est le Menu fixe. Alors pour mieux voir ce Menu fixe ici si je viens maintenant après ma nav rajouter du contenu une abréviation qui va bien, si j'actualise voilà, si j'enregistre, que je bascule dans le navigateur et que j'actualise ma page, voilà dès l'instant où je vais défiler la page, voyez que l'intégralité du menu bouge avec la page ici. Donc on va pouvoir également demander à ce bandeau de menu de se retrouver fixe, et là encore une fois au travers de classes tout simplement. Donc pour pouvoir rendre le menu fixe, il suffit de venir dans la partie du menu donc ici et ensuite à la suite de navbar-default on va rajouer un navbar-fixed-top Alors on aurait pu marquer fixed-bottom, également, par contre attention il faudrait passer un navbar inverse pour dire attention les menus doivent s'ouvrir dans la partie haute. Donc ici ça pourrait être à peu près juste, on va le faire vite pour le voir ici. Le problème c'est que vous voyez, pareil que ce qu'on avait vu quand on développait tout à l'heure dans les premières étapes, c'est que tout le contenu puisque lui il est sorti du flux passe derrière l'élément. Alors pour cela il n'y a pas de magie, il va falloir rajouter un padding to à l'élément, c'est du classique. Pour ça ce que je vous propose c'est de le rajouter directement dans l'en-tête du script, c'est là où il faudrait avoir ses propres feuilles de style, ses propres JavaScript comme le disais au tout début de bootstrap. Donc ici on va pouvoir l'affecter directement à la partie body, on aurait pu l'affecter à la partie maine exactement. Après c'est à vous de voir comment vous voulez mieux gérer la chose, l'idéal c'est de la porter au body ici, de mettre un padding-top de 70, minimum il faut 50 pour cette hauteur-là, et si j'enregistre maintenant et que je re-bascule dans le navigateur, on s'aperçoit que la partie fixe est bien respectée, voyez le 50 serait largement suffisant, attention on n'a pas réinitialisé toutes les marges et paddings de chacun de ces éléments. Et voyez que maintenant ces éléments sont bien ré-ajustés par rapport à la barre de menu. Alors bien entendu si on réduit l'élément ici, on se retrouve toujours en fixe, il n'y a pas de souci ça fonctionne bien. Donc vous voyez que simplement par l'ajout de classes sur une structure qui se veut relativement propre, il est très facile de pouvoir implémenter un menu responsive en bootstrap. Alors je vais copier ici rapidement l'abréviation qui vous permet de placer du contenu rapidement sur cette page, voilà de façon que vous puissiez la réutiliser lors de la reprise de l'exercice. Donc bootstrap encore une fois à utiliser à condition que vous n'utilisiez pas que la partie des menus et que vous utilisez l'intégralité du framework, à ce moment-là ça vaut le coup de s'appuyer sur cette barre de menu responsive.

Mettre en place un menu responsive avec les CSS

Mettez en place des menus responsives au sein de vos pages web. Abordez les diverses approches possibles, que ce soit avec les plug-ins, ou en codant depuis une page blanche.

2h31 (28 vidéos)
Aucun commentaire n´est disponible actuellement
Logiciel :
Spécial abonnés
Date de parution :26 nov. 2015

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !