Voici venu le temps d’un nouveau gloubi tuto sur un autre script de menu. Aujourd’hui, nous allons nous attaquer au menu interactif avec description du lien.

Fonctionnement du script

Le menu est mis en forme avec un simple tableau à une seule colonne, avec un case vide en pied de colonne permettant d’afficher la description du lien survolé.

Le script actuel utilise 2 fonctions : un fonction pour gérer l’arrivée de la souris sur un élément de notre menu (événement mouseover) et une autre pour gérer la sortie de la souris (événement mouseout). Ces deux fonctions sont appelées via les attributs onmouseover/out des éléments du tableau.

La première fonction, movein(), prend deux paramètres : l’id de l’élément et sa description. La deuxième fonction, moveout(), prend un seul paramètre, l’id de l’élément.

Les deux fonctions marchent de la manière suivante :

• on change le style de l’élément (ciblé par son id) en utilisant son attribut style
• on change le contenu de la case de description

Mon remake

Comme à mon habitude, pour les texte des descriptions je vais passer par un data-attribute. Ce qui nous donne le HTML suivant :

<table id="menu">
    <tr><td class="entry" data-description="Ensemble des lettres">Alphabet</td></tr>
    <tr><td class="entry" data-description="Une voiture">Berlingo</td></tr>
    <tr><td class="entry" data-description="Des bêtises">Carabistouille</td></tr>
    <tr><td class="entry" data-description="Une fleur">Dahlia</td></tr>
    <tr><td style="height: 16px;"></td></tr>
</table>

Concernant le JavaScript, on sélectionne les éléments du menu dans deux variables (une pour les liens du menu et une autre pour la case de description).

let menu = document.getElementById('menu'); // permet de raccourcir les seclecteurs ci-dessous
let menuEntries = menu.querySelectorAll('td.entry'); // sélection des liens du menu
let menuDescription = menu.querySelector('tr:last-of-type td'); // sélection de la dernière case

Sur chaque élément du menu on attache deux eventListener, qui changent le contenu de la case description. Pour la fonction attachée à l’événement mouseover, la description est récupérée via le dataset de l’élément survolé :

menuEntries.forEach((entry) => {
    entry.addEventListener('mouseover', (e) => {
        menuDescription.innerText = e.target.dataset.description;
    });
    entry.addEventListener('mouseout', (e) => {
        menuDescription.innerText = '';
    });
});

Si vous voulez voir la version finale de ce script, rendez-vous sur sa page de démo.

Il est maintenant temps de vous souhaiter une bonne journée et de vous dire à la prochaine !