Mettre en place un menu responsive avec les CSS

Implémenter l'icône Burger

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Implémentez une alternative au menu traditionnel. Il s'agit de l'icône Burger et d'une requête de médias. Cette requête présente alternativement le menu complet, ou l'icône Burger, en fonction des périphériques.
02:31

Transcription

Rapidement, afin de visualiser la mise en place de ce menu burger, on va procéder de la même manière que précédemment, c'est-à-dire qu'on va utiliser une série de deux images que l'on va pouvoir utiliser sous forme de sprite, une image de la barre de menu telle que le menu se présenterait et puis ici une image d'une icône de burger. On réalisera ça en CSS, bien sûr c'est pas du tout fonctionnel, c'est simplement pour bien comprendre la mécanique. Pour la mise en place au sein du HTML, on va utiliser de simples divs, des conteneurs qui vont recevoir soit alternativement la partie correspondant à un téléphone ou un appareil mobile donc le burger soit la partie contenant tout le reste du menu qui sera présenté sur le reste des affichages. On va créer deux conteneurs divs, ça peut être deux outils complètement anonymes puisque n'oublions pas que ça sera quand même au sein d'une balise nav et on pourra identifier la balise nav comme étant un composant et tout ce qui va se passer à l'intérieur peut être du div, il n'y a pas besoin d'être vraiment sémantique à ce niveau-là. Il suffit simplement d'avoir un identifiant qui nous permettra de cibler le conteneur qui va contenir toutes les informations propres au menu tel qu'il va se présenter, avec ce bouton, ou les méga menus, on verra plus tard qu'on peut faire des méga menus. Tous ces éléments-là seront dans le conteneur div id menu et puis, dans la partie div id burger, on mettra tout ce qui va concerner la partie d'affichage mobile qui sera présentée en alternance. Il n'y a plus qu'à lier une feuille de style CSS ici et puis maintenant, au niveau de la partie CSS, on a deux requêtes de média, une première qui va déclencher au maximum à 850 et une seconde qui aura un minimum de 851 qui prendra le relais. On peut générer un sprite à ce niveau-là et utiliser l'affichage au niveau du menu en disant on va mettre le menu horizontal et ici le menu burger. visuelle et c'est pas du tout fonctionnel en terme de menu. Maintenant si je regarde au niveau de mon implémentation, si j'enregistre et que j'actualise, voilà, ici ma présentation se trouve supérieure à 850 donc j'ai bien l'affichage visuel des menus et puis, dès qu'on va réduire la surface d'écran de ce périphérique, dès qu'on va passer la barrière des 850, on bascule sur l'affichage du burger et de la partie menu mobile. Bien entendu il va falloir implémenter toute la partie interactive qui permettra, en cliquant sur ce menu, de faire apparaître le menu. On verra ça au cours des étapes suivantes. Là l'idée c'était de vraiment mettre en place cette mécanique d'alternance et des conteneurs d'accueil au niveau du HTML. Bien entendu c'est schématisé, c'est purement de l'illustration

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 !