{"id":124662,"date":"2022-11-16T17:33:30","date_gmt":"2022-11-16T16:33:30","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-a-custom-menu\/"},"modified":"2025-02-03T16:44:44","modified_gmt":"2025-02-03T15:44:44","slug":"how-to-create-a-custom-menu","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-concevoir-un-menu-personnalise","title":{"rendered":"Comment concevoir un menu personnalis\u00e9"},"content":{"rendered":"<p><span data-preserver-spaces=\"true\">Vous apprendrez ici \u00e0 concevoir un menu personnalis\u00e9.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73357737\/index.html\" width=\"820px\" height=\"320px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span data-preserver-spaces=\"true\">Voici comment le construire :<\/span><\/p>\n<h3><strong><span data-preserver-spaces=\"true\">Voir<\/span><\/strong><\/h3>\n<ul>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez un \u00ab\u00a0tableau\u00a0\u00bb et placez-le sur le canevas ; dans la palette Propri\u00e9t\u00e9s, modifiez le nombre de colonnes et de fichiers pour obtenir un fichier et quatre colonnes ; ajustez \u00e9galement la hauteur du tableau pour simuler un en-t\u00eate.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-1.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez chaque cellule une par une et, dans la palette Propri\u00e9t\u00e9s, modifiez la disposition en \u00ab\u00a0Horizontal\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-2.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Placez quatre textes centr\u00e9s sur le canevas et \u00e9crivez : \u00ab\u00a0Accueil\u00a0\u00bb, \u00ab\u00a0Produits\u00a0\u00bb, \u00ab\u00a0Services\u00a0\u00bb et \u00ab\u00a0\u00c0 propos\u00a0\u00bb, maintenez la touche commande (Mac) ou contr\u00f4le (Windows) enfonc\u00e9e et faites glisser les \u00e9l\u00e9ments \u00e0 l&rsquo;int\u00e9rieur des cellules, vous verrez une teinte bleue.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-3.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Dans la biblioth\u00e8que \u00ab\u00a0Composants Web\u00a0\u00bb, ins\u00e9rez une ic\u00f4ne \u00ab\u00a0Chevron vers le bas\u00a0\u00bb \u00e0 c\u00f4t\u00e9 de \u00ab\u00a0Produits\u00a0\u00bb, \u00ab\u00a0Services\u00a0\u00bb et \u00ab\u00a0\u00c0 propos\u00a0\u00bb. Apr\u00e8s avoir donn\u00e9 \u00e0 chaque cellule une disposition horizontale, l&rsquo;ic\u00f4ne sera positionn\u00e9e horizontalement par rapport au texte. Dans la palette Propri\u00e9t\u00e9s, vous pouvez ajuster l&rsquo;espace entre le texte et l&rsquo;ic\u00f4ne.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-4.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Pour les options de menu, placez un nouveau \u00ab\u00a0Tableau\u00a0\u00bb et, dans la palette Propri\u00e9t\u00e9s, modifiez les colonnes pour qu&rsquo;elles soient au nombre de un et les lignes au nombre de trois.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-5.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Maintenez la touche commande (Mac) ou contr\u00f4le (Windows) enfonc\u00e9e et placez 3 textes dans chaque cellule pour \u00ab\u00a0\u00c9l\u00e9ment 1\u00a0\u00bb, \u00ab\u00a0\u00c9l\u00e9ment 2\u00a0\u00bb et \u00ab\u00a0\u00c9l\u00e9ment 3\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-6.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Une fois le tableau s\u00e9lectionn\u00e9, allez dans la palette Propri\u00e9t\u00e9s et changez la couleur de toutes les options de bordure en gris clair et d\u00e9cochez la bordure int\u00e9rieure qui s\u00e9pare les cellules.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-7.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">Le \u00ab\u00a0Tableau\u00a0\u00bb que nous avons cr\u00e9\u00e9 \u00e9tant s\u00e9lectionn\u00e9, maintenez la touche Alt enfonc\u00e9e et faites-le glisser pour le dupliquer, le placer sous \u00ab\u00a0Services\u00a0\u00bb et le dupliquer \u00e0 nouveau pour \u00ab\u00a0\u00c0 propos de\u00a0\u00bb. Une fois le \u00ab\u00a0Tableau\u00a0\u00bb s\u00e9lectionn\u00e9 sous \u00ab\u00a0\u00c0 propos\u00a0\u00bb, acc\u00e9dez \u00e0 la palette Propri\u00e9t\u00e9s et modifiez le nombre de lignes pour le porter \u00e0 deux. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-8.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\">S\u00e9lectionnez les tableaux d&rsquo;\u00e9l\u00e9ments un par un, cliquez dessus avec le bouton droit de la souris et s\u00e9lectionnez l&rsquo;option \u00ab\u00a0Grouper dans le panneau dynamique\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-9.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ul>\n<ul>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">Veillez \u00e0 ce que chaque \u00ab\u00a0panneau dynamique\u00a0\u00bb d\u00e9passe le bord du tableau qu&rsquo;il contient afin que les \u00e9v\u00e9nements que nous cr\u00e9ons ensuite fonctionnent correctement.<\/span><\/span><span data-preserver-spaces=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-10.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<li><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\"><span data-preserver-spaces=\"true\">S\u00e9lectionnez les trois panneaux dynamiques qui fonctionnent comme des listes d\u00e9roulantes, allez dans la palette Propri\u00e9t\u00e9s et cliquez sur l&rsquo;ic\u00f4ne \u00ab\u00a0Cach\u00e9 dans la simulation\u00a0\u00bb. Par d\u00e9faut, les listes d\u00e9roulantes ne seront pas visibles dans la simulation.   <\/span><\/span><\/span>\n<p> <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-11.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<p> <\/p>\n<p> <\/p>\n<\/li>\n<\/ul>\n<h3>Ev\u00e9nements<\/h3>\n<p><span data-preserver-spaces=\"true\">La cellule \u00ab\u00a0Produits\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-12.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0On mouse enter\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Show hidden element\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Dynamic panel\u00a0\u00bb qui agit comme une liste d\u00e9roulante pour l&rsquo;option \u00ab\u00a0Products\u00a0\u00bb. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-13.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">La cellule \u00ab\u00a0Produits\u00a0\u00bb \u00e9tant toujours s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0On mouse enter\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Masquer l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et s\u00e9lectionnez les deux \u00ab\u00a0panneaux dynamiques\u00a0\u00bb qui servent de menus d\u00e9roulants pour les options \u00ab\u00a0Services\u00a0\u00bb et \u00ab\u00a0\u00c0 propos\u00a0\u00bb. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-14.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Dans la palette \u00c9v\u00e9nements, entre les deux options, cliquez sur la fl\u00e8che et changez-la en option \u00ab\u00a0AVEC pr\u00e9c\u00e9dent\u00a0\u00bb, afin que les deux actions soient effectu\u00e9es en m\u00eame temps.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-15.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/p>\n<p>R\u00e9p\u00e9tez l&rsquo;op\u00e9ration pour chaque option du menu sup\u00e9rieur et pour la liste d\u00e9roulante correspondante. Dans chaque cas, nous devons s\u00e9lectionner le \u00ab\u00a0panneau dynamique\u00a0\u00bb que nous voulons afficher et ceux que nous voulons cacher. <\/p>\n<p>S\u00e9lectionnez la cellule \u00ab\u00a0Accueil\u00a0\u00bb et allez dans la palette \u00c9v\u00e9nements, cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0On mouse enter\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Hide element\u00a0\u00bb et s\u00e9lectionnez les trois \u00ab\u00a0Dynamic panels\u00a0\u00bb parmi les options. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <\/span><\/li>\n<\/ol>\n<p>S\u00e9lectionnez les \u00ab\u00a0Panneaux dynamiques\u00a0\u00bb de l&rsquo;option \u00ab\u00a0Produits\u00a0\u00bb et allez dans la palette \u00ab\u00a0Ev\u00e9nements\u00a0\u00bb, cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-16.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez<span style=\"font-weight: 400;\">\u00ab\u00a0on Mouse Leave<\/span>\u00ab\u00a0.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Hide element\u00a0\u00bb et s\u00e9lectionnez le m\u00eame \u00ab\u00a0Dynamic panel\u00a0\u00bb. De cette fa\u00e7on, lorsque vous quitterez le \u00ab\u00a0Dynamic panel\u00a0\u00bb, il ne sera plus affich\u00e9. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement. <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-17.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>R\u00e9p\u00e9tez la m\u00eame op\u00e9ration pour chacun des \u00ab\u00a0panneaux dynamiques\u00a0\u00bb.<\/p>\n<p>S\u00e9lectionnez la premi\u00e8re cellule (Item 1) de la colonne du \u00ab\u00a0Panneau dynamique\u00a0\u00bb de l&rsquo;option \u00ab\u00a0Produits\u00a0\u00bb, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-18.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez<span style=\"font-weight: 400;\">\u00ab\u00a0on Mouse Over<\/span>\u00ab\u00a0.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choose Action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Change style\u00a0\u00bb et dans le menu d\u00e9roulant \u00ab\u00a0Select style to change\u00a0\u00bb, choisissez background et modifiez la couleur. De cette fa\u00e7on, lorsque vous survolez l&rsquo;\u00e9l\u00e9ment 1, vous obtenez un effet de r\u00e9troaction. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.  <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70605\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-19.png\" alt=\"Menu flottant\" width=\"1295\" height=\"933\"><\/span><\/li>\n<\/ol>\n<p>La cellule (\u00e9l\u00e9ment 1) \u00e9tant toujours s\u00e9lectionn\u00e9e, acc\u00e9dez \u00e0 la palette des \u00e9v\u00e9nements et cliquez sur le bouton \u00ab\u00a0Copier tous les \u00e9v\u00e9nements\u00a0\u00bb. S\u00e9lectionnez ensuite chacune des cellules et cliquez sur l&rsquo;option \u00ab\u00a0Coller tous les \u00e9v\u00e9nements\u00a0\u00bb. La cible sera automatiquement modifi\u00e9e.  <br><video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.mp4\" type=\"video\/mp4\"><\/source><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/11\/custom-menu-22.png\" alt=\"Constructeur d'expression\">Constructeur d&rsquo;expression<\/video><\/p>\n<p>Simulez votre prototype.<\/p>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vous apprendrez ici \u00e0 concevoir un menu personnalis\u00e9. Voici comment le construire : Voir S\u00e9lectionnez un \u00ab\u00a0tableau\u00a0\u00bb et placez-le sur le canevas ; dans la palette&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8435,8426],"tags":[],"class_list":["post-124662","post","type-post","status-publish","format-standard","hentry","category-interactions-avancees","category-comment-faire"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124662"}],"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\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124662"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124662\/revisions"}],"predecessor-version":[{"id":126187,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124662\/revisions\/126187"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}