Mettre en place un menu responsive avec les CSS

S'appuyer sur la librairie Bootstrap

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une des librairies en vogue est Bootstrap. Voyez comment mettre en place le code HTML très rapidement, ainsi que les classes CSS. Il s'agit de gérer et de présenter une barre de menus complète et évolutive.
06:33

Transcription

Parmi les librairies disponibles pour nous permettre de fabriquer du composant et d'aller très rapidement à l'essentiel ici on a la possibilité de créer une barre de navigation directement en s'appuyant sur mBootstrap. Si votre site ne charge bootstrap que pour la barre de navigation c'est un peu fort de café. Vous allez utiliser bootstrap pour l'intégralité de la mise en place de votre prototype du site et c'est là où ça devient intéressant de pouvoir s'appuyer sur une telle librairie. Pour la mise en place du code, la première des choses qu'il va nous falloir faire,ça va être de lier l'intégralité des librairies nécessaires, donc directement on peut prendre les CDN de Bootstrap, la librairie CSS unifiée qui va permettre de travailler avec toutes les classes propres à Bootstrap, plus le thème que vous allez utiliser pour la mise en forme visuelle du site pareil là on peut utiliser le cdn. On aura besoin de travailler avec jQuery donc on peut aller chercher un cdn de jquery directement , et puis on peut utiliser la librairie JavaScript minimum pour Bootstrap, Bootstrap s'appuie sur jQuery, tout ça va être utilisé de manière minimum. Si vous avez besoin d'importer du javascript, ne venez pas modifier ces fichiers-là, créez vos propres fichiers CSS, créez vos propres fichiers JavaScript et incrémentez-les pour pouvoir apporter des fonctionnalités visuelles supplémentaires à votre barre de navigation. Pour utiliser la barre de navigation, on va avoir besoin de créer d'une part une barre de navigation, et à l'intérieur de créer 2 div. Une première div, en fait c'est une petite erreur ici, ce qu'il faudrait c'est créer 2 div imbriquées comme ça, une première div et une seconde div. La barre de navigation on lui met un role="navigation" parce que on va faire un geste en direction de l'accessibilité, donc après pensez à venir apporter l'intégralité des roles et attributs dont vous avez besoin pour pouvoir le mieux renseigner cette barre de navigation. Mais au niveau de bootstrap la seule chose qu'on a besoin est de dire : je vais utiliser une class="navbar" pour dire parmi tous les composants disponibles de bootstrap je vais utiliser le navbar. Vous avez 2 possibilités, soit une barre de navigation que vous allez placer en haut et les menus vont se dérouler vers le bas, soit l'inverse vous placerez votre barre de navigation en bas avec les barres de menu qui vont s'ouvrir vers le haut. Nous on va utiliser la classique, on va dire un navbar tout simplement, c'est une classe qu'il faut rajouter qui s'appelle default. Si vous ne le précisez pas, c'est celle qui sera utilisée par défaut. Une fois cette information donnée, on va créer à l'intérieur un container donc la classe container propre à bootstrap. On va partir de bootstrap, on va rester focalisé sur la barre de navigation et soit vous utilisez un container, soit un container fluide, container fluide va faire qu'entre chaque breakpoint le site va être responsive, se réadapter, alors que si vous mettez un container tout court ça va être adaptatif, c'est-à-dire qu'entre les breakpoints l'intégralité du site va rester fixe jusqu'à changer d'apparence en fonction du breakpoint rencontré. Maintenant qu'on a placé ce conteneur global qui va contenir notre navigation, nous allons placer un premier élément qui va être notre logo parce que dans toute barre de navigation, généralement on a un logo. On verra par la suite qu'on peut mettre un burger sandwich, on le verra dans une autre étape. Là déjà on va mettre un logo. Et là il faut renseigner notre composant bootstrap au travers d'une classe toujours qui va être cette fois-ci le navbar-header pour dire que c'est ici que va se placer l'en-tête de la barre. Ensuite pour la barre de menu il suffit de placer toujours à l'intérieur du conteneur div container ici, on va placer notre liste ul et on pourrait mettre par exemple 3 li à l'intérieur tout simplement voilà, pour être notre barre de navigation. Donc le premier on pourrait dire que c'est l'Accueil, le second on pourrait dire qu'on créera par la suite un menu déroulant, pour l'instant on ne va pas le faire, mais on le fera par la suite, et puis le dernier élément un Menu fixe. Et on pourrait prévoir par la suite également un menu d'aide, qu'on pourrait décaler ensuite sur la partie droite par exemple pourquoi pas. On le fera par la suite. Pour l'instant on reste tel quel, on fait un ctrl+S tout simplement. La seule chose c'est que cette liste n'est pas identifiée comme étant un élément bootstrap, donc il faut faire un jeu de classe pour dire je vais utiliser une navigation donc nav et là cette fois-ci on va dire que c'est le navbar-nav c'est à dire que c'est la navigation propre de notre barre de navigation. Alors la première classe nav parce que c'est à partir de là que tout ce qui va être navigation va se passer. Ici si j'enregistre et que je bascule dans le navigateur pour aller visualiser on a bien notre LogoAccueilMenu déroulant qui se place, donc pour pouvoir positionner maintenant chacun de ces éléments comme étant des boutons, nous devons les entourer d'une balise a href pour chacun de ces éléments, qu'il soit fixe ou Menu déroulant, on le verra par la suite, on va pouvoir au fur et à mesure adapter. Donc ici on va ctrl+Shift+G encore une fois pour ajouter une ancre, et puis un autre petit élément, c'est que notre logo ici qui était placé en fait, se retrouve lui aussi un peu isolé, on l'a vu il était dans la partie haute de l'en-tête, donc pour cela on va aussi lui rajouter un lien, parce que généralement quand on clique sur le logo, on retourne à la page d'accueil ou on retourne sur le site et par contre, ce que l'on va placer comme classe ici, ça va être navbar-brand pour dire que c'est la marque de fabrique, donc ici on va rajouter une classe égale navbar, puisque on est toujours dans la barre de navigation, mais cette fois-ci brand pour la marque et on va re-basculer dans notre navigateur. On voit bien le logo et chaque élément de menu est en place, sauf qu'on a encore un petit souci à ce niveau-là, oui effectivement ici j'ai oublié de rajouter le navbar-nav ici. On re-bascule dans le navigateur, on actualise, effectivement notre barre de menu est maintenant en place. Voyez donc c'est relativement rapide pour mettre en place une base de barre de navigation. Ce que je vous propose de faire maintenant c'est de poursuivre avec l'étape suivante pour pouvoir la rendre responsive et la rendre adaptable avec le fameux menu burger qu'on avait vu tout au long de ces étapes.

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 !