Mon remake
Première étape le HTML :
Les tableaux sont remplacés par des <div>. Les liens sont présents directement sur la page et ne sont plus rajoutés par le JavaScript.
<div class="menu">
<div class="menu-row title">
<div class="menu-cell">
<span>Rubrique</span>
</div>
</div>
<div class="menu-row links">
<div class="menu-cell">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</div>
</div>
<div class="menu-row title">
<div class="menu-cell">
<span>Rubrique</span>
</div>
</div>
<div class="menu-row links">
<div class="menu-cell">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</div>
</div>
</div>
Pour préserver le rendu actuel, on utilise le mode d’affichage en tableau : ‘display : table’ sur la <div> englobante, et ensuite ‘display : table-row’ et ‘display : table-cell’ sur les classes correspondantes.
Le texte des « cellules » de titre est placé dans un <span> qui servira de cible pour la détection du survol de souris.
Les « cellules » contenant des liens, masquées par défaut, se voient rajouter une classe ‘active’ qui sera rajoutée/enlevée par du JavaScript.
Deuxième étape le JavaScript :
Le script repose sur 3 variables principales qui sont des tableaux contenant différents éléments, sélectionnés par la méthode querySelectorAll() de l’objet document, qui permet d’utiliser des sélecteurs CSS, tout comme la fonction $() de jQuery.
let menuTitles = document.querySelectorAll('.menu-row.title'); // les "cellules" de titre
let menuTitlesSpan = document.querySelectorAll('.menu-row.title > .menu-cell > span'); // les span cibles
let menuLinks = document.querySelectorAll('.menu-row.links'); // les "cellules" contenant les liens
On boucle sur l’ensemble des <span> cibles (menuTitlesSpan) pour leur attacher un listener sur l’événement ‘mouseover’.
Dans ce listener, on boucle sur l’ensemble des « cellules » de liens (menuLinks) pour leur retirer la classe ‘active’ (via leur classList), ce qui a pour effet de les masquer.
Ensuite, à partir de la cible de l’évenement (e.target), on remonte au parent de son parent (chaînage de propriété parentNode), pour sélectionner son plus proche sibling (propriété nextElementSibling) et lui rajouter la classe ‘active’.
// On boucle sur l'ensemble des cibles
menuTitlesSpan.forEach((ts) => {
// On leur attache un événement 'mouseover'
ts.addEventListener('mouseover', (e) => {
// On retire la classe 'active' à toutes les "cellules" de titre
menuTitles.forEach((t) => {
t.classList.remove('active');
});
// On retire la classe 'active' à toutes les "cellules" de lien
menuLinks.forEach((l) => {
l.classList.remove('active');
});
// On remonte au parent du parent de l'élément
let targetTitle = e.target.parentNode.parentNode;
targetTitle.classList.add('active'); // rajoute la classe 'active' au parent
targetTitle.nextElementSibling.classList.add('active'); // rajoute la classe 'active' au plus proche sibling, qui est la "cellule" de liens
});
});
Et voilà ! Comme d’habitude, le script présenté est disponible sur sa propre page dans la section démonstrations de mon site : Gloubi script – menu déroulant interactif.
À bientôt pour d’autres gloubi tutos.