{"id":976,"date":"2022-12-02T17:47:44","date_gmt":"2022-12-02T16:47:44","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=976"},"modified":"2022-12-02T17:47:44","modified_gmt":"2022-12-02T16:47:44","slug":"gloubi-tuto-un-menu-interactif-hello-kitty","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","title":{"rendered":"Gloubi tuto &#8211; un menu interactif Hello Kitty"},"content":{"rendered":"\n<p>Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les <a href=\"https:\/\/geekcommunicant.wordpress.com\/2022\/11\/27\/et-c-est-reparti\/\" target=\"_blank\" rel=\"noreferrer noopener\">gloubi tutos<\/a>) qui concerne un menu interactif avec Hello Kitty.<\/p>\n\n\n\n<iframe style=\"width:100%;height:256px;\" src=\"https:\/\/geekcommunicant.com\/iframes\/gloubi-menu.html\"><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\">Pr\u00e9sentation et explication de l\u2019existant<\/h2>\n\n\n\n<p>Pour voir la source du script actuel, RDV sur cette <a href=\"http:\/\/gloubiweb.free.fr\/scripts\/javascript17.htm\" target=\"_blank\" rel=\"noreferrer noopener\">page<\/a> du site de notre nouvel adversaire dans la <a href=\"https:\/\/geekcommunicant.wordpress.com\/2011\/12\/01\/la-guerre-est-declaree\/\" target=\"_blank\" rel=\"noreferrer noopener\">guerre du gloubi<\/a>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Le HTML<\/h3>\n\n\n\n<p>Les \u00e9l\u00e9ments sont au nombre de 8 (tous dans leurs propres div, elles-m\u00eame contenues dans une div englobante)&nbsp;:<\/p>\n\n\n\n<p>&#8211; une image de la t\u00eate de Kitty<\/p>\n\n\n\n<p>&#8211; ses jambes<\/p>\n\n\n\n<p>&#8211; et six images correspondant aux entr\u00e9es de notre menu<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le CSS<\/h3>\n\n\n\n<p>Ces 8 \u00e9l\u00e9ments sont tous positionn\u00e9s de mani\u00e8re absolue, et dispos\u00e9s sur 3 \u00ab&nbsp;calques&nbsp;\u00bb (d\u00e9finis en utilisant le z-index) pour permettre aux liens de passer au-dessus des jambes, mais en-dessous de la t\u00eate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le JavaScript<\/h3>\n\n\n\n<p>Le JavaScript est l\u00e0 pour d\u00e9placer tous les liens le long d\u2019une trajectoire elliptique, d\u2019un certain intervalle (ici \u03c0 \/ 180) toutes les x millisecondes (ici 10).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mes modifications<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Le HTML<\/h3>\n\n\n\n<p>La seule modification c\u00f4t\u00e9 HTML fut de me d\u00e9barrasser de ce CSS inline tout moche tout pas beau qui sens trop fort le Web 1.0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le CSS<\/h3>\n\n\n\n<p>Les deux premi\u00e8res r\u00e8gles de ce nouveau CSS sont l\u00e0 pour mettre la div englobante en positionnement relatif et les divs internes en positionnement absolu. Le positionnement relatif de la div englobante permet que ses enfants soient positionn\u00e9s par rapport \u00e0 elle, car le positionnement absolu se fait par rapport au plus proche parent positionn\u00e9 de mani\u00e8re relative (voir sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Learn\/CSS\/CSS_layout\/Positioning#contextes_de_positionnement\" target=\"_blank\" rel=\"noreferrer noopener\">MDN web docs<\/a>).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n#menu {\n    position: relative;\n}\n#menu &gt; div {\n    position: absolute;\n}\n<\/pre><\/div>\n\n\n<p class=\"has-background\" style=\"background-color:#e5aaaa\"><strong><span style=\"text-decoration: underline;\">Attention<\/span><\/strong>&nbsp;: du fait de l\u2019utilisation du positionnement absolu, tous les \u00e9l\u00e9ments du menu sont en dehors de leur div parente et s\u2019affichent au-dessus des \u00e9l\u00e9ments de la page plus bas que celle-ci. Il faut bien penser \u00e0 forcer les dimensions de la div parente si vous souhaitez utiliser ce menu sur votre site.<\/p>\n\n\n\n<p>Viennent ensuite 3 r\u00e8gles pour la mise en forme de l\u2019image centrale du menu.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n#menu &gt; #teh {\n    left:113px;\n    top:54px;\n    width:150px;\n    height:96px;\n    visibility:visible;\n    z-index:4;\n}\n#menu &gt; #teb {\n    left:115px;\n    top:150px;\n    width:150px;\n    height:68px;\n    visibility:visible;\n    z-index:2;\n}\n#menu &gt; #teh img, #menu &gt; #teb img {\n    width: 100%;\n    height: 100%;\n}\n<\/pre><\/div>\n\n\n<p>Et pour terminer, 2 r\u00e8gles pour la mise en forme des liens.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n#menu &gt; .link {\n    left:0px;\n    top:0px;\n    width:40px;\n    height:40px;\n    visibility:hidden;\n    z-index:3;\n}\n#menu &gt; .link img {\n    width: 39px;\n    height: 48px;\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Le JavaScript<\/h3>\n\n\n\n<p>Ici, pas mal de choses ont boug\u00e9es, le JavaScript ayant beaucoup \u00e9volu\u00e9 depuis la cr\u00e9ation du script original.<\/p>\n\n\n\n<p>Premier gros changement, l\u2019ensemble du code a \u00e9t\u00e9 englob\u00e9 d\u2019un <code>EventListener<\/code> \u00e0 l\u2019\u00e9coute du chargement complet de la page (tout comme le <code>$(document).ready()<\/code> de jQuery).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nwindow.addEventListener(&#039;load&#039;, () =&gt; {});\n<\/pre><\/div>\n\n\n<p>L\u2019ajout de cet EventListener a n\u00e9cessit\u00e9 la r\u00e9\u00e9criture de la fonction en charge du d\u00e9placement des \u00e9l\u00e9ments du menu en lui rajoutant des param\u00e8tres d\u2019entr\u00e9e.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction rotateObjets(objets, pos, inc, ra, rb) { \n  for (let i = 0; i &lt; pos.length; i++) {\n      pos&#x5B;i] += inc;\n      objets&#x5B;i].style.left = (ra * Math.cos(pos&#x5B;i])) + 159 + &quot;px&quot;;\n      objets&#x5B;i].style.top = (rb * Math.sin(pos&#x5B;i])) + 94 + &quot;px&quot;;\n      objets&#x5B;i].style.visibility = &quot;visible&quot;;\n  }\n} \n<\/pre><\/div>\n\n\n<p>Deuxi\u00e8me changement important&nbsp;: l\u2019utilisation de <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/Document\/querySelectorAll\" target=\"_blank\" rel=\"noreferrer noopener\">querySelectorAll()<\/a><\/code> pour construire le tableau d\u2019\u00e9l\u00e9ments du menu (cette m\u00e9thode n\u2019est support\u00e9e que <a href=\"https:\/\/caniuse.com\/?search=querySelectorAll\" target=\"_blank\" rel=\"noreferrer noopener\">depuis 2009<\/a> au plus t\u00f4t, d\u2019o\u00f9 ce changement assez cons\u00e9quent).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet objets = document.querySelectorAll(&#039;#menu &gt; .link&#039;);\n<\/pre><\/div>\n\n\n<p>Le dernier changement se situe dans la mani\u00e8re d\u2019assurer l\u2019appel en boucle de la fonction de d\u00e9placement des entr\u00e9es du menu. Au lieu d\u2019utiliser un Timeout \u00e0 la fin de la fonction \u00e0 appeler en boucle, j\u2019utilise un setInterval.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet rotateTimer;\n\nrotateObjets(objets, pos, inc, ra, rb);\nrotateTimer = window.setInterval(rotateObjets, 10, objets, pos, inc, ra, rb);\n<\/pre><\/div>\n\n\n<p>Ce setInterval est tr\u00e8s utile pour la seule fonctionnalit\u00e9 ajout\u00e9e&nbsp;: l\u2019arr\u00eat de la rotation quand la souris survole un des \u00e9l\u00e9ments du menu.<\/p>\n\n\n\n<p>Cette nouvelle fonctionnalit\u00e9 est assur\u00e9e par l\u2019ajout de deux eventListeners sur les \u00e9l\u00e9ments du menu&nbsp;: un pour quand la souris arrive sur l\u2019\u00e9l\u00e9ment, et un autre quand elle le quitte.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nobjets.forEach((objet) =&gt; {\n  objet.addEventListener(&#039;mouseenter&#039;, (e) =&gt; {\n    clearInterval(rotateTimer);\n  });\n\n  objet.addEventListener(&#039;mouseleave&#039;, (e) =&gt; {\n    rotateObjets(objets, pos, inc, ra, rb);\n    rotateTimer = window.setInterval(rotateObjets, 10, objets, pos, inc, ra, rb); \n  });\n});\n<\/pre><\/div>\n\n\n<p>Le premier \u00e9v\u00e9nement supprime la boucle avec clearInterval().<\/p>\n\n\n\n<p>Le deuxi\u00e8me relance le mecanisme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pour conclure<\/h2>\n\n\n\n<p>J\u2019esp\u00e8re que cet article vous aura \u00e9t\u00e9 utile tout comme mes pr\u00e9c\u00e9dents tutoriels.<\/p>\n\n\n\n<p>Pour voir le script en action et acc\u00e9der au code source, rendez-vous <a href=\"https:\/\/geekcommunicant.com\/demos\/gloubi-menu-interactif-kitty.html\">ici<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/\">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":[52,51,31],"class_list":["post-976","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-gloubiscript","tag-gloubituto","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-fK","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1108,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/10\/gloubi-tuto-menu-avec-description-du-lien\/","url_meta":{"origin":976,"position":0},"title":"Gloubi tuto &#8211; menu avec description du lien","author":"geekc","date":"10\/02\/2023","format":false,"excerpt":"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 une seule colonne, avec un case vide en pied de\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":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":976,"position":1},"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":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":976,"position":2},"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":[]},{"id":1074,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","url_meta":{"origin":976,"position":3},"title":"Gloubi script &#8211; texte avec un arri\u00e8re-plan d\u00e9filant","author":"geekc","date":"13\/01\/2023","format":false,"excerpt":"Aujourd\u2019hui nouveau tuto sur un gloubi script d\u2019effet sur texte. Cette fois ci, il s\u2019agit de texte avec arri\u00e8re-plan d\u00e9filant. Principe du script Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire. Il fonctionne selon le principe de calques\u00a0: au-dessus du calque 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":1081,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/20\/gloubi-tuto-menu-images-reactives\/","url_meta":{"origin":976,"position":4},"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":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":976,"position":5},"title":"Gloubi script &#8211; un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\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\/976","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=976"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/976\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}