{"id":1108,"date":"2023-02-10T16:48:35","date_gmt":"2023-02-10T15:48:35","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1108"},"modified":"2023-02-10T16:48:36","modified_gmt":"2023-02-10T15:48:36","slug":"gloubi-tuto-menu-avec-description-du-lien","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/10\/gloubi-tuto-menu-avec-description-du-lien\/","title":{"rendered":"Gloubi tuto &#8211; menu avec description du lien"},"content":{"rendered":"\n<p>Voici venu le temps d\u2019un nouveau gloubi tuto sur un autre script de menu. Aujourd\u2019hui, nous allons nous attaquer au <a href=\"http:\/\/gloubiweb.free.fr\/scripts\/javascript45.htm\" target=\"_blank\" rel=\"noreferrer noopener\">menu interactif avec description du lien<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fonctionnement du script<\/h2>\n\n\n\n<p>Le menu est mis en forme avec un simple tableau \u00e0 une seule colonne, avec un case vide en pied de colonne permettant d\u2019afficher la description du lien survol\u00e9.<\/p>\n\n\n\n<p>Le script actuel utilise 2 fonctions&nbsp;: un fonction pour g\u00e9rer l\u2019arriv\u00e9e de la souris sur un \u00e9l\u00e9ment de notre menu (\u00e9v\u00e9nement mouseover) et une autre pour g\u00e9rer la sortie de la souris (\u00e9v\u00e9nement mouseout). Ces deux fonctions sont appel\u00e9es via les attributs onmouseover\/out des \u00e9l\u00e9ments du tableau.<\/p>\n\n\n\n<p>La premi\u00e8re fonction, <em>movein()<\/em>, prend deux param\u00e8tres&nbsp;: l\u2019id de l\u2019\u00e9l\u00e9ment et sa description. La deuxi\u00e8me fonction, <em>moveout()<\/em>, prend un seul param\u00e8tre, l\u2019id de l\u2019\u00e9l\u00e9ment.<\/p>\n\n\n\n<p>Les deux fonctions marchent de la mani\u00e8re suivante&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>on change le style de l\u2019\u00e9l\u00e9ment (cibl\u00e9 par son id) en utilisant son attribut style<\/li>\n\n\n\n<li>on change le contenu de la case de description<\/li>\n<\/ul>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Mon remake<\/h2>\n\n\n\n<p>Comme \u00e0 mon habitude, pour les texte des descriptions je vais passer par un <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/HTML\/Global_attributes\/data-*\" target=\"_blank\" rel=\"noreferrer noopener\">data-attribute<\/a>. Ce qui nous donne le HTML suivant&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;table id=&quot;menu&quot;&gt;\n    &lt;tr&gt;&lt;td class=&quot;entry&quot; data-description=&quot;Ensemble des lettres&quot;&gt;Alphabet&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;td class=&quot;entry&quot; data-description=&quot;Une voiture&quot;&gt;Berlingo&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;td class=&quot;entry&quot; data-description=&quot;Des b\u00eatises&quot;&gt;Carabistouille&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;td class=&quot;entry&quot; data-description=&quot;Une fleur&quot;&gt;Dahlia&lt;\/td&gt;&lt;\/tr&gt;\n    &lt;tr&gt;&lt;td style=&quot;height: 16px;&quot;&gt;&lt;\/td&gt;&lt;\/tr&gt;\n&lt;\/table&gt;\n<\/pre><\/div>\n\n\n<p>Concernant le JavaScript, on s\u00e9lectionne les \u00e9l\u00e9ments du menu dans deux variables (une pour les liens du menu et une autre pour la case de description).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet menu = document.getElementById(&#039;menu&#039;); \/\/ permet de raccourcir les seclecteurs ci-dessous\nlet menuEntries = menu.querySelectorAll(&#039;td.entry&#039;); \/\/ s\u00e9lection des liens du menu\nlet menuDescription = menu.querySelector(&#039;tr:last-of-type td&#039;); \/\/ s\u00e9lection de la derni\u00e8re case\n<\/pre><\/div>\n\n\n<p>Sur chaque \u00e9l\u00e9ment du menu on attache deux eventListener, qui changent le contenu de la case description. Pour la fonction attach\u00e9e \u00e0 l\u2019\u00e9v\u00e9nement mouseover, la description est r\u00e9cup\u00e9r\u00e9e via le <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/HTMLElement\/dataset\" target=\"_blank\" rel=\"noreferrer noopener\">dataset<\/a> de l\u2019\u00e9l\u00e9ment survol\u00e9&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nmenuEntries.forEach((entry) =&gt; {\n    entry.addEventListener(&#039;mouseover&#039;, (e) =&gt; {\n        menuDescription.innerText = e.target.dataset.description;\n    });\n    entry.addEventListener(&#039;mouseout&#039;, (e) =&gt; {\n        menuDescription.innerText = &#039;&#039;;\n    });\n});\n<\/pre><\/div>\n\n\n<p>Si vous voulez voir la version finale de ce script, rendez-vous sur sa <a href=\"https:\/\/geekcommunicant.com\/demos\/gloubi-script-menu-description-lien.html\" target=\"_blank\" rel=\"noreferrer noopener\">page de d\u00e9mo<\/a>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Il est maintenant temps de vous souhaiter une bonne journ\u00e9e et de vous dire \u00e0 la prochaine !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici venu le temps d\u2019un nouveau gloubi tuto sur un autre script de menu. Aujourd\u2019hui, nous allons nous attaquer au menu interactif avec description du lien. Fonctionnement du script Le menu est mis en forme avec un simple tableau \u00e0 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/02\/10\/gloubi-tuto-menu-avec-description-du-lien\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[51,54],"class_list":["post-1108","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-gloubituto","tag-menu"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-hS","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":1108,"position":0},"title":"Gloubi tuto &#8211; menu interactif d\u00e9roulant","author":"geekc","date":"30\/12\/2022","format":false,"excerpt":"Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire. Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes. Fonctionnement Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":976,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","url_meta":{"origin":1108,"position":1},"title":"Gloubi tuto &#8211; un menu interactif Hello Kitty","author":"geekc","date":"02\/12\/2022","format":false,"excerpt":"Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty. Pr\u00e9sentation et explication de l\u2019existant Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi. Le\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1081,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/20\/gloubi-tuto-menu-images-reactives\/","url_meta":{"origin":1108,"position":2},"title":"Gloubi tuto &#8211; menu avec images r\u00e9actives","author":"geekc","date":"20\/01\/2023","format":false,"excerpt":"Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s\u2019attaque \u00e0 un autre script de menu. M\u2019enfin script\u2026 pas cette-fois. M\u00eame si sur gloubiweb cela est pr\u00e9sent\u00e9 comme un script, il s\u2019agit en fait de CSS. Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS. Pr\u00e9sentation de\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1133,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/10\/gloubi-script-un-systeme-de-tooltip\/","url_meta":{"origin":1108,"position":3},"title":"Gloubi script &#8211; un syst\u00e8me de tooltip","author":"geekc","date":"10\/03\/2023","format":false,"excerpt":"J\u2019ai d\u00e9cid\u00e9 cette semaine de me pencher sur le script de tooltip pr\u00e9sent\u00e9 sur le site de gloubiweb. Dans une premi\u00e8re partie je pr\u00e9senterai rapidement le fonctionnement du script actuel, et dans une deuxi\u00e8me, je vous indiquerai comment recr\u00e9er (quasi) \u00e0 l\u2019identique cet ancien script. Pr\u00e9sentation de du code existant\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":991,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/","url_meta":{"origin":1108,"position":4},"title":"Gloubi tuto &#8211; un texte en d\u00e9grad\u00e9","author":"geekc","date":"09\/12\/2022","format":false,"excerpt":"Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog\u00a0: le texte \u00ab\u00a0arc-en-ciel\u00a0\u00bb (en d\u00e9grad\u00e9s). Script original et explication Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre N\u00e9m\u00e9sis dans la deuxi\u00e8me\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":1108,"position":5},"title":"Gloubi tuto &#8211; texte changeant de couleur","author":"geekc","date":"27\/01\/2023","format":false,"excerpt":"Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur. Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en tout cas tr\u00e8s proche). Fonctionnement du script On indique au\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1108"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1108\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}