Mettre en place un menu responsive avec les CSS

Améliorer le menu en responsive

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois le menu en place, il est très facile de basculer son fonctionnement en mode responsive. En fonction du container principal, vous allez être soit en responsif, soit en adaptatif.
03:40

Transcription

Pour améliorer vers l'aspect responsive de notre menu, il faut ajouter quelques classes et quelques éléments. On va commencer déjà par ajouter un bouton dans la partie du navbar-header ici juste avant le brand Logo on va rajouter un bouton. Et à ce bouton on va apporter quelques attributs pour sa modalité de fonctionnement. On va définir que c'est un type="button" ici, on apporte la classe qui va permettre la fermeture de cet élément qui sera navbar-toggle c'est-à-dire qu'il va permuter entre 2 états. Justement dans la partie JavaScript il faut invoquer au travers du data toggle le mode d'action que l'on va vouloir apporter, c'est le fameux collapse ici qui va permettre de fermer ce bouton et de le permuter. On verra par la suite qu'on va le permuter avec un deuxième élément de cette barre de menu, et on viendra identifier ici cet élément un peu plus tard, en définissant un data-target, quelle sera la cible de l'élément qui va devoir se collapser à l'alternative avec ce bouton-là. Alors maintenant au niveau des span, on va rentrer un premier span avec une classe SR8 qui va affecter un screen reader, donc lecteur d'écran en disant ici c'est le menu qui va nous permettre d'accéder au menu alternatif proposé par le fameux entre guillemets burger que nous allons représenter maintenant toujours pareil au travers de span en utilisant une classe icon-bar qui va permettre d'avoir une seule barre. Comme nous le burger est constitué de 3 bar, on va dupliquer 3 fois cet élément. Donc ici maintenant on est propre à notre icône de burger, par contre on n'a pas l'alternative du menu. Et ça, l'alternative du menu, on va la placer au travers de cet élément-là ici et faire un ajout de div ici, cette div je vais pouvoir lui donner 2 informations, la première information est l'identifiant ici, cet identifiant je vais pouvoir lui donner l'identifiant que je veux, je vais l'appeler navbarCollapse" pour dire c'est l'alternative que je vais avoir à mon burger de tout à l'heure. Il va falloir d'entrée de jeu la redéfinir, on va rajouter une première classe ici qui va être la classe Collapse, qui veut dire attention on va se rendre dans un menu aplati, c'est à dire fermé dès que je vais être en position responsive, et la deuxième chose c'est de dire je vais utiliser quand même une barre de navigation sur cet aspect collapse, j'aurais pu avoir un accordéon ou tout autre type de menu, non moi ce que je veux c'est continuer à avoir ma barre de navigation ici. Maintenant que tout est mis en place ici, je vais venir définir un data-target qui va contenir l'identifiant, on l'a dit un navbar-collapse, qui correspond à cet élément-là. Voilà donc en gros ce qui se passe j'ai ma première partie haute ici div, on va essayer de l'arrranger un peu pour le rendre plus visuel, composée d'un bouton et d'un élément d'identification ici le Logo, ce bouton va entrer en alternative avec le navbar-Collapse ici au travers de tous les paramètres qu'on a rentré au niveau des attributs du bouton. Il nous reste plus qu'à enregistrer, basculer dans le navigateur, actualiser ma page. Bien entendu il faut que je redimensionne mon écran ici. Voyez je suis donc en container, je reste fixe parce que je ne suis pas en container fluide entre chaque breakpoint, puis il arrive un moment où quand je passe dans le breakpoint le plus proche de mon aspect responsive ici, j'ai mon menu qui est apparu, ma barre de menu qui correspond à ce bouton-là qui continue à me permettre le collapse barre de navigation, puisque c'est ce que j'ai défini dans les paramètres.

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
Votre/vos formateur(s) :
Date de parution :26 nov. 2015
Durée :2h31 (28 vidéos)

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 !