Le tuto "menu horizontal une ligne" explique bien comment afficher un menu sur une première ligne et les options de sous-menu sur une deuxième ligne.
L'événement hover permet de signaler l'option de menu choisie au passage de la souris, par un changement de couleur ou de taille de caractère par exemple, tandis que la fonction onmouseover permet de déclancer l'affichage du sous-menu.
Lorsque la souris quitte l'option de menu pour pointer sur le sous-menu par exemple, ou ailleurs dans la fenêtre, l'événement hover ne s'applique plus à ladite option de menu, qui retourne à son état "normal". On ne peut donc plus identifier visuellement à quel choix du menu correspond un sous-menu.
La question est donc simple : comment faire en sorte que l'affichage d'un sous-menu provoque également le changement de couleur ou la taille de caractère de l'option de menu à laquelle il correspond, même lorsque la souris ne pointe plus sur elle ?
Merci pour vos lumières !
Gilles
Puisque ma question n'a pas suscité un débordement d'enthousiasme, il a bien fallu que je me débrouille seul, ce qui n'est pas plus mal finalement...
La fonction javascript montre(id) du tuto de Raphaël permet d'afficher le sous-menu. Je voulais que cette fonction modifie également l'option de menu correspondante, pour que le lien hiérarchique menu/sous-menu soit apparent. J'ai donc modifié la fonction, en lui ajoutant une variable et quelques lignes supplémentaires. Je débute en la matière et des solutions plus élégantes existent peut-être. Voici la fonction javascript enrichie :
function montre(subid,menuid) {
var d = document.getElementById(subid);
var m = document.getElementById(menuid);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
document.getElementById('menu'+i).style.fontSize='17px';
document.getElementById('menu'+i).style.color='#DDDDDD';
}
}
if (d) {d.style.display='block';}
if (m) {m.style.fontSize='22px';m.style.color='white';}
}
Côté HTML, il suffit de déclarer une seconde variable pour la fonction montre(). Voici un exemple pour une des options du menu.
<li>
<dt onmouseover="montre('smenu1','menu1');"><a id="menu1" title="HOME" href="home.html#top">HOME</a></dt>
</li>
Cette modif a pour effet de passer une option de menu en blanc au lieu de gris (#DDDDDD), et en 22px au lieu de 17px, même lorsque la souris se promène dans son sous-menu ou ailleurs dans la fenêtre. Elle retrouve son état "normal" dès que la souris passe sur une autre option du menu.
Modifié par Imparfait (26 Jan 2006 - 12:57)
L'événement hover permet de signaler l'option de menu choisie au passage de la souris, par un changement de couleur ou de taille de caractère par exemple, tandis que la fonction onmouseover permet de déclancer l'affichage du sous-menu.
Lorsque la souris quitte l'option de menu pour pointer sur le sous-menu par exemple, ou ailleurs dans la fenêtre, l'événement hover ne s'applique plus à ladite option de menu, qui retourne à son état "normal". On ne peut donc plus identifier visuellement à quel choix du menu correspond un sous-menu.
La question est donc simple : comment faire en sorte que l'affichage d'un sous-menu provoque également le changement de couleur ou la taille de caractère de l'option de menu à laquelle il correspond, même lorsque la souris ne pointe plus sur elle ?
Merci pour vos lumières !
Gilles
Puisque ma question n'a pas suscité un débordement d'enthousiasme, il a bien fallu que je me débrouille seul, ce qui n'est pas plus mal finalement...La fonction javascript montre(id) du tuto de Raphaël permet d'afficher le sous-menu. Je voulais que cette fonction modifie également l'option de menu correspondante, pour que le lien hiérarchique menu/sous-menu soit apparent. J'ai donc modifié la fonction, en lui ajoutant une variable et quelques lignes supplémentaires. Je débute en la matière et des solutions plus élégantes existent peut-être. Voici la fonction javascript enrichie :
function montre(subid,menuid) {
var d = document.getElementById(subid);
var m = document.getElementById(menuid);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
document.getElementById('menu'+i).style.fontSize='17px';
document.getElementById('menu'+i).style.color='#DDDDDD';
}
}
if (d) {d.style.display='block';}
if (m) {m.style.fontSize='22px';m.style.color='white';}
}
Côté HTML, il suffit de déclarer une seconde variable pour la fonction montre(). Voici un exemple pour une des options du menu.
<li>
<dt onmouseover="montre('smenu1','menu1');"><a id="menu1" title="HOME" href="home.html#top">HOME</a></dt>
</li>
Cette modif a pour effet de passer une option de menu en blanc au lieu de gris (#DDDDDD), et en 22px au lieu de 17px, même lorsque la souris se promène dans son sous-menu ou ailleurs dans la fenêtre. Elle retrouve son état "normal" dès que la souris passe sur une autre option du menu.
Modifié par Imparfait (26 Jan 2006 - 12:57)