Mettre en place un menu responsive avec les CSS

Mettre en place le fichier source HTML

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il est important de vous assurer que le code HTML et la structure mise en place soient des plus robustes et évolutifs possibles. Évitez de surcharger le code en balises inutiles et excédentaires. Utilisez simplement l'accrochage visuel.
04:37

Transcription

Il est important de ne pas confondre la structure HTML avec une sorte d'échafaudage sur lequel on va pouvoir tout ajouter, tout construire, simplement pour arriver à nos fins. Le HTML reste avant tout le contenu du document et on va essayer de rester très proche du contenu sans ajouter des artifices ou des artefacts de balises qui vont nous servir à accrocher du CSS. Prenons le temps de mettre en place justement le HTML et réfléchissons vraiment au besoin qu'on a tant sur HTML comme instruction minimale. Le minimum va être de découper les gros conteneurs principaux, ici ça va être le header, le main et le footer par exemple donc on va pouvoir construire ces trois jeux de balises. Bien entendu on pourrait avoir un e-side, on pourrait avoir d'autres types de construction. Je vais en rester au minimum syndical de l'utilisation qu'on va avoir. Ici, pour l'instant, dans le footer la seule chose que vous pouvez dire c'est rajouter un contenu qui n'a strictement rien à voir. Voilà, c'est simplement une information qui va se promener dans le footer et puis dans le header qu'est-ce qu'on va rajouter ? on va rajouter notre logo et notre navigation. Ce que je vais faire c'est rajouter un peu de place ici et je vais simplement rajouter un logo sous forme d'une balise a contenant tout simplement le mot logo qui serait le logo de notre entreprise. On pourrait rajouter une href "♯" ici pour dire qu'on va mettre une ancre pour recharger la page tout simplement mais ça va être le minimum.Ça pourrait être un h1, ça pourrait être tout de suite les balises mais, voilà, on pourrait économiser ce h1 pour d'autres contenus et vraiment rester sur une syntaxe très propre, un lien, notre logo, le texte et après on pourra caler une image ou modifier le contenu. Maintenant ce qu'on va avoir c'est une balise de navigation. Ce qui est important c'est de se dire attention, cette navigation va être notre menu et ici, dans ce menu, on va rajouter un rôle navigation pour prendre en compte au niveau accessibilité. On reviendra dans un chapitre accessibilité plus détaillé mais déjà je le rajoute ici, simplement pour se rappeler que cette navigation doit être, au niveau accessibilité, prise en compte comme étant notre menu principal et ici on va pouvoir rajouter notre balise a contenant des liens, on va l'écrire en majuscules, je me suis trompé d'accolade ici, {Lien}, et on va mettre un $$ pour faire un lien 0, lien 1, lien 2, lien 3 etc. On va rajouter cette fois-là un signet et ici, dès que je vais faire cette validation d'abréviation, on a généré notre navigation. Ici on pourrait très bien rajouter un ♯, je ne l'ai pas fait dans la synchronisation mais on va pouvoir le rajouter ici, voilà, dire qu'on a une ancre à chacun de nos liens et on va pouvoir travailler. Ce à quoi il est important maintenant de penser pour la suite de notre travail, là je vais le copier directement puisqu'il n'y a pas trop d'intérêt, on va la décrire ensemble. Je vais copier une abréviation que vous retrouverez dans les fichiers sources pour pouvoir la copier-coller. Ici on va dire qu'on va créer une section qui aura une classe main_section. Cette classe main_section contiendra un titre avec le titre du contenu plus un certain nombre d'articles, par exemple ici articles au même niveau donc h 2 contenant eux-mêmes des titres d'articles avec un $, article 1, article 2, article 3 et, toujours au même niveau que ce h2, donc au sein de l'article, quatre paragraphes contenant du Lorem au hasard et on pourrait faire six articles comme ça. Pourquoi mettre tout ce contenu en place ? Tout simplement pour avoir quelque chose lorsqu'on va visualiser, je vais faire un enregistrement, on va aller le visualiser dans un navigateur, voilà, et dès qu'on est dans un navigateur qu'est-ce qu'on a ? on a notre menu, notre logo, notre ensemble de liens ici de menus sous forme de liens ancre donc il n'y a pas d'élément de liste ni rien donc tout est en ligne, le titre du contenu, titre d'article 1, article 2 etc et, vous voyez, c'est surtout pour avoir ce déroulé-là parce que ce qu'on va faire avec les CSS, on le fera juste après, c'est de pouvoir bloquer cette partie-là en partie fixe que l'on soit sur un écran d'ordinateur ou sur un appareil de type mobile. Si vous n'avez pas ce contenu, vous ne pourrez pas jouer de la molette pour pouvoir naviguer. Voilà, un contenu HTML minimum avec simplement une partie header qui contient l'ensemble de la barre de navigation, logo et navigation principale, et puis ensuite toute la section main qui contient l'intégralité des contenus de la page et le footer qui contient simplement une phrase mais qui va nous permettre de pouvoir bien visualiser tout cela, quelque soit le périphérique de sortie.

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 !