{"id":124701,"date":"2019-01-02T18:01:34","date_gmt":"2019-01-02T17:01:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/create-a-conditional-menu\/"},"modified":"2025-02-03T16:44:32","modified_gmt":"2025-02-03T15:44:32","slug":"create-a-conditional-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/creer-un-menu-conditionnel","title":{"rendered":"Cr\u00e9er un menu conditionnel"},"content":{"rendered":"<p>Les menus conditionnels n&rsquo;affichent que certaines parties du menu en fonction de la taille de l&rsquo;\u00e9cran. Cela vous permet de masquer les \u00e9l\u00e9ments moins importants lorsque l&rsquo;\u00e9cran est petit et d&rsquo;afficher plus d&rsquo;\u00e9l\u00e9ments lorsque l&rsquo;\u00e9cran est plus grand. <video style=\"\" class=\"lazyload\" preload=\"\" muted=\"\" loop=\"\" data-autoplay=\"\" data-poster=\"\" playsinline=\"\"><source src=\"\" type=\"\"><img decoding=\"async\" src=\"\" alt=\"\">Exemple de menu conditionnel<\/source><\/video><br \/>\nVoici comment cr\u00e9er un menu conditionnel : <\/p>\n<ol>\n<li>Faites glisser sur le canevas tous les \u00e9l\u00e9ments que vous souhaitez inclure dans le menu. Dans notre exemple, nous faisons glisser trois widgets Rectangle et les intitulons \u00ab\u00a0Accueil\u00a0\u00bb, \u00ab\u00a0S&rsquo;inscrire\u00a0\u00bb et \u00ab\u00a0Se connecter\u00a0\u00bb. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15174\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/DesignMenu.png\" alt=\"Menu design\" width=\"755\" height=\"450\"><\/li>\n<li>S\u00e9lectionnez les trois en faisant un shift-clic sur le canevas ou dans la palette Outline. Cliquez ensuite avec le bouton droit de la souris et, dans la bo\u00eete de dialogue qui s&rsquo;affiche, cliquez sur \u00ab\u00a0Grouper dans un panneau dynamique\u00a0\u00bb. \u00c9pinglez ce panneau \u00e0 droite avec une marge de 40px.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758255\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Ajoutez un autre panneau dans le panneau dynamique en s\u00e9lectionnant le panneau 1, puis en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0+\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15175\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/AddAnotherPanel.png\" alt=\"Ajouter un autre panneau\" width=\"755\" height=\"394\"><\/li>\n<li>Dans ce panneau (panneau 2), faites glisser une ic\u00f4ne de menu hamburger. La n\u00f4tre provient de la biblioth\u00e8que de widgets Web Components. \u00c9pinglez ce panneau \u00e0 droite avec une marge de 20px.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15176\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/MenuIcon.png\" alt=\"Ic\u00f4ne de menu\" width=\"755\" height=\"413\"><\/li>\n<li>S\u00e9lectionnez le panneau dynamique sur le canevas. Cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Window Resize\u00a0\u00bb + \u00ab\u00a0Set Active Panel\u00a0\u00bb. Faites en sorte qu&rsquo;il d\u00e9finisse le panneau 2 comme actif.\n<div class=\"embed-container\" style=\"padding-bottom:60%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758429\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<li>Cr\u00e9ez une condition pour cette action, de sorte qu&rsquo;elle ne d\u00e9finisse le panneau 2 comme actif que lorsque l&rsquo;\u00e9cran a une certaine largeur. Cliquez sur le texte \u00ab\u00a0Ajouter une condition\u00a0\u00bb. Le g\u00e9n\u00e9rateur d&rsquo;expression conditionnelle appara\u00eet. Suivez les \u00e9tapes suivantes pour cr\u00e9er la condition :\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758599\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><strong>1.<\/strong> Dans le constructeur, cliquez sur l&rsquo;onglet \u00ab\u00a0Constantes\u00a0\u00bb. Faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de la fen\u00eatre\u00a0\u00bb dans l&rsquo;espace libre de l&rsquo;expression. <strong>2.<\/strong> Cliquez sur l&rsquo;onglet \u00ab\u00a0Fonctions\u00a0\u00bb et sur la section \u00ab\u00a0Comparateurs\u00a0\u00bb. Faites glisser l&rsquo;ic\u00f4ne \u00ab\u00a0Moins que\u00a0\u00bb (&lsquo;&lt;&lsquo;) \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne \u00ab\u00a0Largeur de fen\u00eatre\u00a0\u00bb. <strong>3.<\/strong> Enfin, dans l&rsquo;espace libre qui appara\u00eet \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne &lsquo;Less Than&rsquo; (&lsquo;&lt;&lsquo;), double-cliquez et tapez 600. <strong>4.<\/strong> Cliquez sur OK pour terminer la construction de la condition. <\/p>\n<\/li>\n<li>Cliquez sur le texte \u00ab\u00a0Else\u00a0\u00bb, ce qui ouvrira la bo\u00eete de dialogue Events. Cr\u00e9ez un \u00e9v\u00e9nement \u00ab\u00a0On Window Resize\u00a0\u00bb + \u00ab\u00a0Set Active Panel\u00a0\u00bb et s\u00e9lectionnez le panneau 1 comme panneau actif. Cliquez sur OK pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. Il n&rsquo;est pas n\u00e9cessaire de cr\u00e9er une condition pour cet \u00e9v\u00e9nement.\n<div class=\"embed-container\" style=\"padding-bottom:62%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/745758684\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<\/li>\n<\/ol>\n<p>Cliquez sur \u00ab\u00a0Simuler\u00a0\u00bb et voyez comment fonctionne votre menu conditionnel.<\/p>\n<div><strong>Remarque :<\/strong> les param\u00e8tres de la simulation doivent \u00eatre r\u00e9gl\u00e9s de mani\u00e8re \u00e0 ce que la largeur du navigateur s&rsquo;\u00e9tende. Vous pouvez le sp\u00e9cifier dans les param\u00e8tres de simulation ou dans la fen\u00eatre de simulation. <\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-15298\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/12\/SimulationSetting.png\" alt=\"Param\u00e8tres de simulation\" width=\"755\" height=\"491\"><br \/>\nVous pouvez <a href=\"https:\/\/s3-eu-west-1.amazonaws.com\/justinmind\/examples\/ConditionalMenu.vp\">t\u00e9l\u00e9charger notre exemple ici.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les menus conditionnels n&rsquo;affichent que certaines parties du menu en fonction de la taille de l&rsquo;\u00e9cran. Cela vous permet de masquer les \u00e9l\u00e9ments moins importants lorsque&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8416,8441],"tags":[],"class_list":["post-124701","post","type-post","status-publish","format-standard","hentry","category-formation","category-prototypage-reactif"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124701"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124701"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124701\/revisions"}],"predecessor-version":[{"id":126159,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124701\/revisions\/126159"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}