Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire.<\/p>\n\n\n\n
Ce script est visible sur cette page<\/a>, et est toujours fonctionnel dans les navigateurs modernes.<\/p>\n\n\n\n Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des balises HTML).<\/p>\n\n\n Les diff\u00e9rentes entr\u00e9es (rubriques principales) du menu sont renseign\u00e9es dans un array \u2018mv_menu\u2019, et les liens correspondant \u00e0 chacune de ces rubriques sont renseign\u00e9s dans un autre array, \u2018mv_lien\u2019.<\/p>\n\n\n\n Dans ce deuxi\u00e8me array, les index des entr\u00e9es doivent correspondre avec les index du premier tableau, et les liens sont form\u00e9s par concat\u00e9nation de balises <a>.<\/p>\n\n\n Une variable mv_pos permet d\u2019indiquer l\u2019entr\u00e9e du menu dont on doit afficher les liens.<\/p>\n\n\n\n La fonction principale (mv_menu_draw) fonctionne comme suit.<\/p>\n\n\n\n On boucle sur le tableau des entr\u00e9es principales (\u2018mv_menu\u2019). Pour chacune des entr\u00e9es de ce tableau, selon qu\u2019elle soit s\u00e9lectionn\u00e9e (au survol de la souris) ou pas, on affiche le texte avec un style diff\u00e9rent. Si l\u2019entr\u00e9e est s\u00e9lectionn\u00e9e, alors on affiche les liens correspondant (dans le tableau \u2018mv_lien\u2019).<\/p>\n\n\n Premi\u00e8re \u00e9tape le HTML<\/span> :<\/p>\n\n\n\n Les tableaux sont remplac\u00e9s par des <div>. Les liens sont pr\u00e9sents directement sur la page et ne sont plus rajout\u00e9s par le JavaScript.<\/p>\n\n\n Pour pr\u00e9server le rendu actuel, on utilise le mode d\u2019affichage en tableau<\/a> : \u2018display : table\u2019 sur la <div> englobante, et ensuite \u2018display : table-row\u2019 et \u2018display : table-cell\u2019 sur les classes correspondantes.<\/p>\n\n\n\n Le texte des \u00ab cellules \u00bb de titre est plac\u00e9 dans un <span> qui servira de cible pour la d\u00e9tection du survol de souris.<\/p>\n\n\n\n Les \u00ab cellules \u00bb contenant des liens, masqu\u00e9es par d\u00e9faut, se voient rajouter une classe \u2018active\u2019 qui sera rajout\u00e9e\/enlev\u00e9e par du JavaScript.<\/p>\n\n\n\n Deuxi\u00e8me \u00e9tape le JavaScript<\/span> :<\/p>\n\n\n\n Le script repose sur 3 variables principales qui sont des tableaux contenant diff\u00e9rents \u00e9l\u00e9ments, s\u00e9lectionn\u00e9s par la m\u00e9thode querySelectorAll()<\/a> de l\u2019objet document, qui permet d\u2019utiliser des s\u00e9lecteurs CSS, tout comme la fonction $() de jQuery.<\/p>\n\n\n On boucle sur l\u2019ensemble des <span> cibles (menuTitlesSpan) pour leur attacher un listener sur l’\u00e9v\u00e9nement \u2018mouseover\u2019.<\/p>\n\n\n\n Dans ce listener, on boucle sur l\u2019ensemble des \u00ab cellules \u00bb de liens (menuLinks) pour leur retirer la classe \u2018active\u2019 (via leur classList<\/a>), ce qui a pour effet de les masquer.<\/p>\n\n\n\n Ensuite, \u00e0 partir de la cible de l\u2019\u00e9venement (e.target), on remonte au parent de son parent (cha\u00eenage de propri\u00e9t\u00e9 parentNode), pour s\u00e9lectionner son plus proche sibling (propri\u00e9t\u00e9 nextElementSibling) et lui rajouter la classe \u2018active\u2019.<\/p>\n\n\n Et voil\u00e0\u00a0! Comme d\u2019habitude, le script pr\u00e9sent\u00e9 est disponible sur sa propre page dans la section d\u00e9monstrations de mon site : Gloubi script – menu d\u00e9roulant interactif<\/a>.<\/p>\n\n\n\n \u00c0 bient\u00f4t pour d\u2019autres gloubi tutos.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 … Continuer la lecture Fonctionnement<\/h2>\n\n\n\n
\n<table>\n <tr>\n <td>Rubrique<\/td>\n <\/tr>\n <tr>\n <td>Liens....<\/td>\n <\/tr>\n <tr>\n <td>Rubrique<\/td>\n <\/tr>\n <tr>\n <td>Liens....<\/td>\n <\/tr>\n<\/table>\n<\/pre><\/div>\n\n\n\n\n\n\n
\nmv_menu = new Array();\nmv_lien = new Array();\n\nmv_menu[0] = 'RUBRIQUES';\nmv_menu[1] = 'TEST';\n\n\nmv_lien[0] = ''\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . fonds<\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . textures<\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . papiers<\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . gifs<\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . annuaire <\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . guestbook<\/A><BR>';\nmv_lien[0] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . jascripts<\/A><BR>';\n\n\nmv_lien[1] = '';\nmv_lien[1] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . GA<\/A<BR<br\/>';\nmv_lien[1] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . BU<\/A<BR<br\/>';\nmv_lien[1] += '<A HREF="http:\/\/www.monsite" target="_blank" CLASS=mvstyle> . ZO<\/A<BR<br\/>';\n<\/pre><\/div>\n\n\n
\n\/\/ On boucle sur les rubriques\nfor(a=0;a<mv_menu.length;a++) {\n \/\/ Est-ce que la rubrique est s\u00e9lectionn\u00e9e ?\n if(mv_pos == a || !document.getElementById) {\n bgcolor = "#00ff00";\n } else {\n bgcolor = "#FF9900";\n }\n\n if(document.getElementById) {\n mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><A HREF=..\/\/%22#\/%22 onMouseOver=\\"mv2_pos="+a+";mv2_menu_draw()\\" CLASS=mv2style><FONT FACE=\\"Courrier\\" SIZE=2><B>"+mv_menu[a]+"<\/B><\/FONT><\/A><\/TD><\/TR>";\n } else {\n mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\\"Courrier\\" SIZE=3 COLOR=#0000FF><B>"+mv_menu[a]+"<\/B><\/FONT><\/TD><\/TR>"\n }\n\n \/\/ Si la rubrique est s\u00e9lectionn\u00e9e, on affiche ses liens\n if(mv_pos == a || !document.getElementById) {\n mv_aff += "<TR><TD BGCOLOR="+bgcolor+"><FONT FACE=\\"Courrier\\" SIZE=2><B>"+mv_lien[a]+"<\/B><\/FONT><\/TD><\/TR>";\n }\n}\n<\/pre><\/div>\n\n\n\n\n\n\nMon remake<\/h2>\n\n\n\n
\n<div class="menu">\n <div class="menu-row title">\n <div class="menu-cell">\n <span>Rubrique<\/span>\n <\/div>\n <\/div>\n <div class="menu-row links">\n <div class="menu-cell">\n <ul>\n <li><a href="#">A<\/a><\/li>\n <li><a href="#">B<\/a><\/li>\n <li><a href="#">C<\/a><\/li>\n <li><a href="#">D<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class="menu-row title">\n <div class="menu-cell">\n <span>Rubrique<\/span>\n <\/div>\n <\/div>\n <div class="menu-row links">\n <div class="menu-cell">\n <ul>\n <li><a href="#">A<\/a><\/li>\n <li><a href="#">B<\/a><\/li>\n <li><a href="#">C<\/a><\/li>\n <li><a href="#">D<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n<\/pre><\/div>\n\n\n
\nlet menuTitles = document.querySelectorAll('.menu-row.title'); \/\/ les "cellules" de titre\nlet menuTitlesSpan = document.querySelectorAll('.menu-row.title > .menu-cell > span'); \/\/ les span cibles\nlet menuLinks = document.querySelectorAll('.menu-row.links'); \/\/ les "cellules" contenant les liens\n<\/pre><\/div>\n\n\n\n\/\/ On boucle sur l'ensemble des cibles\nmenuTitlesSpan.forEach((ts) => {\n \/\/ On leur attache un \u00e9v\u00e9nement 'mouseover'\n ts.addEventListener('mouseover', (e) => {\n \/\/ On retire la classe 'active' \u00e0 toutes les "cellules" de titre\n menuTitles.forEach((t) => {\n t.classList.remove('active');\n });\n \n \/\/ On retire la classe 'active' \u00e0 toutes les "cellules" de lien\n menuLinks.forEach((l) => {\n l.classList.remove('active');\n });\n\n \/\/ On remonte au parent du parent de l'\u00e9l\u00e9ment\n let targetTitle = e.target.parentNode.parentNode;\n\n targetTitle.classList.add('active'); \/\/ rajoute la classe 'active' au parent\n targetTitle.nextElementSibling.classList.add('active'); \/\/ rajoute la classe 'active' au plus proche sibling, qui est la "cellule" de liens\n });\n});\n<\/pre><\/div>\n\n\n