L'essentiel du HTML5

Parcourir les menus de navigation

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez le complément incontournable qui réunit les liens et la structure de votre site. Il s'agit de la barre de navigation ou des menus, en fonction du développement pour des sites ou des applications.
08:05

Transcription

Pour clore ce chapitre sur les hyperliens, l'arborescence et la navigation, on va aborder quelques approches que l'on peut avoir pour créer ce qu'on appelle nos menus ou une barre de navigation. Alors, ici, on va utiliser quelques articles pour pouvoir stocker les diverses approches proposées. Donc, on va commencer par une approche la plus basique qu'on puisse avoir puisqu'après tout, quest-ce qu'un lien ? C'est ni plus ni moins qu'un mot entouré d'une balise a avec un attribut href qui permet de pointer vers une destination. Dès lors où on va avoir plusieurs éléments de menu comme ça, ou plusieurs éléments de lien, on va pouvoir les regrouper entre eux et dire, voilà, ici, ça, c'est ma navigation. Alors on a simplement besoin de placer une balise nav de part et d'autre de cet ensemble de liens pour avoir une barre de navigation. Une fois que cette barre est identifiée, on n'a pas besoin de plus. Si je regarde dans un navigateur, ici. Voilà, j'actualise ma page. Qu'est-ce qu'on a ? On a une barre de menu. Ce sont les feuilles de style qui vont permettre de dire que ça, c'est une barre de menu, voilà plusieurs boutons. Mais structurellement et sémantiquement, on n'a pas besoin de quelque chose de plus. Alors, c'est vrai que par habitude, vous pouvez rencontrer certains ouvrages qui vous disent, on va créer une liste ul li, non ordonnée. C'est vrai qu'on peut utiliser cette approche là mais simplement le fait d'avoir des ancres comme ça, placées les unes après les autres, est largement suffisant. Le fait de pointer une balise nav va indiquer au moteurs ou au navigateurs que vous avez à faire ici à votre navigation principale de votre site. Bien entendu qu'on peut avoir une approche plus structurée cette fois-ci et qui va se baser sur une utilisation de la liste ul li. Alors, ici, je code pour ceux d'entre vous qui utilise emmet, c'est toujours bien d'avoir des petits fragments de code, comme ça. Vous pouvez les récupérer et les utiliser pour construire vos arborescences. Ici, on en n'a pas besoin maos je vous montre juste la manière de l'utiliser. Il suffit de copier ça. Si je fais un nouveau fichier. Je le transforme en fichier html. Vous collez votre syntaxe. Vous validez et ça vous génère directement le contenu. Ici, on ne va pas utiliser cette approche là, on va continuer à travailler en se disant, mais qu'est-ce qu'on a besoin ? On a besoin d'une balise nav pour représenter la navigation. On a besoin, au sein de cette balise, de créer une liste non ordonnée. Ul Et puis de placer autant de liens que l'on veut à l'intérieur de cette liste. À la différence de ce qu'on a vu précédemment, c'est à dire qu'on a un élément libre autour de chaque balise a. Alors, quel est l'intérêt de faire ça, si on s'arrête là ? Aucun. Vous pouvez utiliser cette écriture. Mais l'intérêt ici, va être de dire attention, dans cet élément là, le menu 2, je l'écarte. Et rappelez-vous ce qu'on a dit au moment des listes, c'est bien la fermeture entre l'ouverture de li et la fermeture de li. On va pouvoir placer un autre élément de liste, ici. Et donc, on peut placer un autre élément de liste ordonnée ou non ordonnée, ça c'est votre choix. Et ici, continuer à égrainer des éléments de type link qui vont permettre de venir rajouter une barre de sous menu. Si j'enregistre ici, et que je bascule cette fois-ci dans le navigateur, si j'actualise ma page de navigateur, on voit bien qu'on a un élément de menu avec une imbrication ici, de sous menu. Alors, ici, ce n'est pas du css, on ne va pas gérer la mécanique d'affichage/masquage de ce sous menu. Je vous invite à vous rapprocher d'une formation plus verticale sur le css pour voir cela. Mais ici, dans cette partie là, vous voyez que la structure est très simple très basique au niveau de son imbrication. Juste une petite aparté sur ce qui pourrait éventuellement concerner le footer parce que souvent, lorsqu'on a une navigation, ce qu'on a bien tendance à faire, c'est ce menu on va le répéter dans le footer. Alors, si vous le répéter dans le footer, pas de soucis, vous pouvez le faire. Mais évitez la balise nav, qui n'est pas nécessaire puisqu'on comprend très bien que s'il y a une liste de liens placés dans le footer, généralement, c'est la réplique de la barre de navigation principale. Donc, comme on l'avait vu déjà, au niveau des éléments du w3c, pas besoin de récupérer la balise nav au sein du footer. Avant de continuer, j'aime bien quand même présenter ces informations là sur le w3c, vous voyez, ici. Le footer element alone est suffisant pour de tels cas. Alors qu'un élément de type nav peut être utilisé, il est bien souvent, pas nécessaire. Donc, ensuite, au niveau de l'élément nav, on s'aperçoit que le contenu permi et autorisé, c'est du flow content. Donc encore une fois, le flow content, c'est à la fois du franz, ing plus tous les éléments. Donc on peut venir placer à l'intérieur d'une balise de type nav, des éléments de type side, section, article, h1, etc... Donc, de ce fait, si je viens à l'intérieur de mon élément, ici, nav je vais pouvoir dire, j'ai un article qui contient une balise nav, qui contient un h1 sommaire, qui contient une section avec une introduction, une liste, un élément de liste, un autre élément. On peut imbriquer à l'intérieur de ces autres éléments une autre liste ul, avec des éléments de liste. Et bien entendu, puisqu'on a fait une première section, on peut faire une deuxième section avec encore un niveau h2 de titre pour la présentation. Et là, on va rentrer dans ce qu'on appelle du sommaire. Et donc, si on se replace ici dans un contexte, On a une véritable tables des matières qui peut être faite dans un élément de navigation avec un sommaire, une introduction, des sections qui vont pouvoir venir égrainer l'intégralité du contenu. Si cependant, vous êtes plutôt orienté applications mobiles, et que donc, vous allez porter soit au travers de fontgap, ou d'autres outils, votre html vers de l'applicatif embarqué, à ce moment-là, vous pouvez utiliser non pas la balise nav mais la balise menu. Et puis, ensuite, égrainer au sein de ces contenus directement vos éléments de type li. Alors, vous n'avez pas besoin de passer par un élément de type u, ici à ce niveau là. Et si vous regardez au sein du navigateur, si vous actualisez la page, vous voyez bien qu'on se retrouve avec un menu, ici, propre. N'ayant pas de balise nav, les moteurs utilisés en navigateur web ne reconnaîtrons pas d'une même manière qu'une navigation mais plutôt comme une barre applicative de menu. Si on retourne dans l'approche des menus, ici, on va pouvoir utiliser également un autre type d'éléments. C'est qu'au lieu d'utiliser des éléments de type li, a, href, on va utiliser un menu item à l'intérieur de l'élément menu. Donc, on va pouvoir donner un label. Cette fois-ci, au lieu d'utiliser un texte émergé, on utilisera un label. Et on va pouvoir comme ça, égrainer plusieurs types de menus. Vous avez vu que j'ai laissé menu 1, menu 3, c'est parce qu'en fait, à l'intérieur d'un menu, on peut placer un autre menu. Qui lui, aurait un label menu 2, cette fois-ci. Et qui va contenir à son tour des enfants de type menu item, menu item. Alors, qu'est-ce qu'il faut faire maintenant pour pouvoir utiliser ça de manière très transparente dans du html ? C'est simplement venir donner un type à ce menu principal. Le menu conteneur de type, par exemple, context. On va dire que c'est un menu contextuel. On va lui donner un identifiant. Cet identifiant pourra être ce qu'on veut. On va l'appeler menu contextuel. Et si on associe maintenant, à l'article, c'est à dire le conteneur de ce menu, un contexte menu en disant voilà, un élément de menu contextuel qui pointe vers l'identifiant menu contextuel, À ce moment là, si j'enregistre et que je teste dans un navigateur, on va s'apercevoir qu'on a l'article qui existe mais qui est vide. Vousvoyez, il n'y a rien. Par contre, dès l'instant ou je vais faire un clic droit dessus, j'ai mon menu 1, menu 2, menu 2.1, menu 2.2, pour les menus item embarqués qui vont tout simplement s'égrainer avec simplement le menu inspecté propre au navigateur. Mais vous voyez que le menu contextuel a été remplacé. Bien entendu, si je clique sur les autres éléments, ils possèdent le menu contextuel par défaut. Voilà donc tout une approche qui va nous permettre au vu de diverses manières de structurer le code, de pouvoir créer des barres de menu, des outils de navigation que l'on développe des sites web ou des applications.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Creation de lien avec emmet et sublime text
Francois P.

Vu le passage bref et peu explicite, pour ceux qui veulent pas galérer à chercher.
Activation via sublime text dans "preference>package control>install package> rechecher "emmet" nav>ul>(li>a[href="#"]>{Menu $})*4 validation via touche Tabulation
Toute la syntaxe de Emmet dispo sur https://emmet.io/ Rubrique Documentation>Syntax

Birnou Sébarte Birnou Sébarte

Merci de votre retour. En fait, tout au long des formations que je propose, je fournis, pour ceux qui le souhaitent des fragments d'abréviations Emmet.

Et bien que cela n'incombe pas à ces formations, merci de soulever cette question que certains peuvent se poser quant à l'utilisation de ce « Emmet » qui n'est pas installé par défaut dans les éditeurs de code.

Je recommande, à ceux qui le souhaitent, de se rendre sur la page https://emmet.io/download/ où divers plugin sont proposés en fonction de l'IDE, ou de l'éditeur utilisé (Sublime, Coda, Komodo, NotePad++, Dreamweaver, Eclipse, NetBeans, CodePen, JSFiddle, Brackets... et bien d'autres).

En ce qui concerne la prise en main d'Emmet, je ne saurais que conseiller la formation Coder plus rapidement avec Emmet, Sass et Compass sans oublier de se rapprocher de l'excellent cheat-sheet mis à disposition par l'éditeur.

 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

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 !