{"id":1053,"date":"2020-05-18T08:03:46","date_gmt":"2020-05-18T06:03:46","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=1053"},"modified":"2025-10-05T21:11:29","modified_gmt":"2025-10-05T19:11:29","slug":"insertion-menu-avec-luxbar","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/","title":{"rendered":"Insertion d&rsquo;un menu avec Luxbar"},"content":{"rendered":"\n<p class=\"has-secondary-background-color has-background\">Pour finaliser la production d&rsquo;un site simple cr\u00e9\u00e9 \u00e0 partir de la r\u00e9daction structur\u00e9e d&rsquo;un article, je vous propose maintenant d&rsquo;ins\u00e9rer en t\u00eate de page un menu fixe.<\/p>\n\n\n\n<p>Chacun dispose d\u00e9sormais d&rsquo;un dossier de site dans lequel se trouvent&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>le fichier <strong>index.html<\/strong>,<\/li><li>le dossier <strong>css<\/strong> contenant les 4 feuilles de styles utilisables (m\u00eame si la seule feuille de style utilis\u00e9e est absolument n\u00e9cessaire)<\/li><li>le dossier <strong>img<\/strong> contenant les images collect\u00e9es (m\u00eame si l\u00e0 aussi, seule l&rsquo;image int\u00e9gr\u00e9e dans la page soit n\u00e9cessaire)<\/li><\/ul>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Pour ins\u00e9rer un menu fixe, nous allons utiliser l&rsquo;application Web <a rel=\"noreferrer noopener\" href=\"https:\/\/balzss.github.io\/luxbar\/\" target=\"_blank\">Luxbar<\/a>.  Celle-ci g\u00e9n\u00e8re le code HTML dont nous avons besoin. <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Preparation\" >Pr\u00e9paration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Parametrer_Luxbar\" >Param\u00e9trer Luxbar<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Choix_du_nombre_donglets\" >Choix du nombre d&rsquo;onglets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Choix_de_la_position_du_menu_et_de_sa_couleur\" >Choix de la position du menu et de sa couleur<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Choix_des_modalites_daffichage_dans_la_barre_de_navigation\" >Choix des modalit\u00e9s d&rsquo;affichage dans la barre de navigation<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Parametrer_le_code_HTML_du_menu\" >Param\u00e9trer le code HTML du menu<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/insertion-menu-avec-luxbar\/#Etablir_les_liens_avec_la_page_dans_le_code_du_menu\" >\u00c9tablir les liens avec la page dans le code du menu<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preparation\"><\/span>Pr\u00e9paration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Le code propos\u00e9 par l&rsquo;appli Luxbar est op\u00e9rationnel dans la mesure ou la feuille de style correspondante est disponible dans le dossier du site.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Il est donc n\u00e9cessaire de <strong>t\u00e9l\u00e9charger la feuille de style \u201cluxbar.css\u201d puis de la placer dans le dossier \u201ccss\u201d du site.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/fcs\/luxbar.zip\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger luxbar.css<\/a><\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"441\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01-1024x441.png\" alt=\"\" class=\"wp-image-1066\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01-1024x441.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01-600x259.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01-768x331.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01-1200x517.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-01.png 1436w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Parametrer_Luxbar\"><\/span>Param\u00e9trer Luxbar<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Il s&rsquo;agit maintenant d&rsquo;utiliser l&rsquo;application Luxbar pour g\u00e9n\u00e9rer le code HTML du menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/balzss.github.io\/luxbar\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"539\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar-1024x539.png\" alt=\"interface de l'application Luxbar\" class=\"wp-image-1059\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar-1024x539.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar-600x316.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar-768x404.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar-1200x632.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/appli-luxbar.png 1396w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Inutile de t\u00e9l\u00e9charger l&rsquo;appli Web (comme cela vous est propos\u00e9 en d\u00e9but de page. Tous les r\u00e9glages s&rsquo;effectuent directement sur la page de l&rsquo;application. Il suffit de cocher les options souhait\u00e9es. Quoiqu&rsquo;il en soit, tout est modifiable dans le code ult\u00e9rieurement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choix_du_nombre_donglets\"><\/span>Choix du nombre d&rsquo;onglets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04-1024x597.png\" alt=\"\" class=\"wp-image-1078\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04-1024x597.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04-600x350.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04-768x447.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04-1200x699.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-04.png 1397w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Le nombre d&rsquo;onglets d\u00e9pend \u00e0 priori du nombre de sous-titre h2, auquel il faut ajouter un onglet \u201cAccueil\u201d, pour revenir en haut de page quand on en a besoin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choix_de_la_position_du_menu_et_de_sa_couleur\"><\/span>Choix de la position du menu et de sa couleur<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02-1024x575.png\" alt=\"\" class=\"wp-image-1070\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02-1024x575.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02-600x337.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02-768x431.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02-1200x673.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-02.png 1429w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Je vous invite \u00e0 <strong>choisir la position \u201cFixed\u201d<\/strong>. En effet, elle se r\u00e9v\u00e8le la plus intuitive et la plus pratique sur tous les \u00e9crans.<\/p>\n\n\n\n<p>Sur la capture d&rsquo;\u00e9cran, j&rsquo;ai coch\u00e9 \u201cFixed Bottom\u201d pour des raisons pratiques de positionnement des commentaires \ud83d\ude09<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choix_des_modalites_daffichage_dans_la_barre_de_navigation\"><\/span>Choix des modalit\u00e9s d&rsquo;affichage dans la barre de navigation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03-1024x494.png\" alt=\"\" class=\"wp-image-1074\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03-1024x494.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03-600x290.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03-768x371.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03-1200x579.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-03.png 1411w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Choisissez ici les options qui vous conviennent le mieux.<\/p>\n\n\n\n<p>L&rsquo;option d&rsquo;<strong>animation du hamburger<\/strong> concerne l&rsquo;ic\u00f4ne des 3 traits superpos\u00e9s qui s&rsquo;affiche pour acc\u00e9der au menu quand l&rsquo;\u00e9cran ou la fen\u00eatre de navigation est de petite taille.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-05.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-05.png\" alt=\"\" class=\"wp-image-1082\" width=\"485\" height=\"337\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-05.png 913w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-05-600x418.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-05-768x535.png 768w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/a><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Parametrer_le_code_HTML_du_menu\"><\/span>Param\u00e9trer le code HTML du menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Une fois les options choisies, l&rsquo;application Luxbar vous propose de copier dans votre code source une s\u00e9rie de lignes HTML (un bouton \u201cCopy\u201d apparait au survol du code).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06-1024x497.png\" alt=\"\" class=\"wp-image-1085\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06-1024x497.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06-600x291.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06-768x373.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06-1200x582.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-06.png 1437w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c Copiez le code HTML propos\u00e9 et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. <strong>Choisissez la balise &lt;nav&gt;<\/strong> \u00e0 la place de la balise &lt;header&gt;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"592\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07-1024x592.png\" alt=\"\" class=\"wp-image-1088\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07-1024x592.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07-600x347.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07-768x444.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07-1200x694.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-07.png 1430w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Etablir_les_liens_avec_la_page_dans_le_code_du_menu\"><\/span>\u00c9tablir les liens avec la page dans le code du menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Sur la capture d&rsquo;\u00e9cran pr\u00e9c\u00e9dente, j&rsquo;indique que des changements doivent \u00eatre effectu\u00e9s dans le code HTML du menu Luxbar. En effet, il s&rsquo;agit d&rsquo;\u00e9tablir un lien entre chaque onglet et l&rsquo;endroit de la page vers lequel l&rsquo;onglet est sens\u00e9 pointer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08-1024x590.png\" alt=\"\" class=\"wp-image-1095\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08-1024x590.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08-600x346.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08-768x442.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08-1200x691.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-08.png 1432w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Pour installer proprement un menu Luxbar avec les styles que je vous ai propos\u00e9, il est n\u00e9cessaire de proc\u00e9der \u00e0 des am\u00e9liorations dans le code HTML et dans les CSS. <\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u279c T\u00e9l\u00e9chargez les CSS adapt\u00e9es et placez-les dans le dossier \u201ccss\u201d. Ensuite, appelez celle qui vous convient via la balise &lt;link&gt;, dans le head de votre site.<\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--2\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/fcs\/css-pour-luxbar.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">T\u00e9l\u00e9charger les CSS adapt\u00e9es au menu Luxbar<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Mettez en place les bandeaux qui vont permettre aux titres &lt;h2&gt; de s&rsquo;afficher sous la barre de menu. Positionnez ensuite les diff\u00e9rents id (ancres de navigation) dans les &lt;div class=\u00a0\u00bbbandeau\u00a0\u00bb&gt; (voir l&rsquo;exemple donn\u00e9 dans la capture d&rsquo;\u00e9cran pr\u00e9c\u00e9dente).<\/p>\n\n\n\n<p>Pour que les feuilles de style adapt\u00e9es au menu Luxbar puissent s&rsquo;appliquer correctement \u00e0 votre page HTML, il est n\u00e9cessaire de cr\u00e9er de cr\u00e9er 2 bo\u00eetes (divisions) importantes&nbsp;: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>une boite &lt;main&gt;&lt;\/main&gt;<\/li><li>une bo\u00eete &lt;footer&gt;&lt;\/footer&gt;<\/li><\/ul>\n\n\n\n<p>La bo\u00eete &lt;main&gt;&lt;\/main&gt;  englobera les contenus principaux (h1 &#8211; p &#8211; h2 &#8211; p &#8211; p &#8211; etc.). Dans notre cas, elle sera chapeaut\u00e9e par la bo\u00eete &lt;nav&gt;&lt;\/nav&gt; contenant le menu et elle sera suivie de la bo\u00eete &lt;footer&gt;&lt;\/footer&gt; contenant des informations annexes sur le site et ses contenus.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"600\" src=\"http:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09-1024x600.png\" alt=\"\" class=\"wp-image-1103\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09-1024x600.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09-600x352.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09-768x450.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/05\/luxbar-css-09.png 1032w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Je vous propose de t\u00e9l\u00e9charger un exemple de r\u00e9alisation similaire pour voir quels sont pr\u00e9cis\u00e9ment les attendus \u00e0 ce stade des op\u00e9rations \ud83d\ude09<\/p>\n\n\n\n<div class=\"wp-block-buttons aligncenter is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link\" href=\"http:\/\/graphizm.fr\/fcs\/exemples-realisations\/limiter-pollution-numerique.zip\" style=\"border-radius:10px\" target=\"_blank\" rel=\"noreferrer noopener\">t\u00e9l\u00e9charger un site exemple<\/a><\/div>\n<\/div>\n\n\n\n<p>Vous pouvez consulter le site exemple \u00e0 cette adresse&nbsp;: <a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/fcs\/exemples-realisations\/pollution-numerique\" target=\"_blank\">http:\/\/graphizm.fr\/fcs\/exemples-realisations\/pollution-numerique<\/a>. Notez que <strong>ce site n&rsquo;est pas optimis\u00e9 pour le r\u00e9f\u00e9rencement naturel<\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Pour finaliser la production d&rsquo;un site simple cr\u00e9\u00e9 \u00e0 partir de la r\u00e9daction structur\u00e9e d&rsquo;un article, je vous propose maintenant d&rsquo;ins\u00e9rer en t\u00eate de page un menu fixe. Chacun dispose d\u00e9sormais d&rsquo;un dossier de site dans lequel se trouvent&nbsp;: le fichier index.html, le dossier css contenant les 4 feuilles de styles utilisables (m\u00eame si la [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15],"tags":[],"class_list":["post-1053","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs1-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Pour finaliser la production d&rsquo;un site simple cr\u00e9\u00e9 \u00e0 partir de la r\u00e9daction structur\u00e9e d&rsquo;un article, je vous propose maintenant d&rsquo;ins\u00e9rer en t\u00eate de page un menu fixe. Chacun dispose d\u00e9sormais d&rsquo;un dossier de site dans lequel se trouvent&nbsp;: le fichier index.html,le dossier css contenant les 4 feuilles de styles utilisables (m\u00eame si la seule feuille de style utilis\u00e9e est absolument n\u00e9cessaire)le dossier img contenant les images collect\u00e9es (m\u00eame si l\u00e0 aussi, seule l&rsquo;image int\u00e9gr\u00e9e dans la page soit n\u00e9cessaire) \u279c Pour ins\u00e9rer un menu fixe, nous allons utiliser l&rsquo;application Web Luxbar. Celle-ci g\u00e9n\u00e8re le code HTML dont nous avons\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs1-cours\/\" rel=\"category tag\">FCS1-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1053","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=1053"}],"version-history":[{"count":47,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1053\/revisions"}],"predecessor-version":[{"id":7269,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/1053\/revisions\/7269"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=1053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=1053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=1053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}