Euh ouais... je ne suis pas sûr de bien comprendre ni que cela me permette de faire ce que je cherche.
Quelques explications...
Je cherche à faire un menu déroulant horizontal comme celui qui est présenté dans le tutorial
Un menu déroulant en CSS et XHTML (horizontal et vertical). Mon menu (encore à l'état de prototype) a la la structure suivante :
<div id="menu">
<dl>
<dt><a href="#" title="Retour à l'accueil" onmouseover="cacheAllMenus();" onfocus="cacheAllMenus();">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="afficheMenu('secMenu1');">
<a href="#" title="Menu 1" onfocus="afficheMenu('secMenu1');">Menu 1</a>
</dt>
<dd id="secMenu1" onmouseover="afficheMenu('secMenu1');" onmouseout="cacheAllMenus();">
<ul>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.1</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.2</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.3</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.4</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.5</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu1');">Sous-Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="afficheMenu('secMenu2');">
<a href="#" title="Menu 2" onfocus="afficheMenu('secMenu2');">Menu 2</a>
</dt>
<dd id="secMenu2" onmouseover="afficheMenu('secMenu2');" onmouseout="cacheAllMenus();">
<ul>
<li><a href="#" onfocus="afficheMenu('secMenu2');">Sous-Menu 2.1</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu2');">Sous-Menu 2.2</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu2');">Sous-Menu 2.3</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="afficheMenu('secMenu3');">
<a href="#" title="Menu 3" onfocus="afficheMenu('secMenu3');">Menu 3</a>
</dt>
<dd id="secMenu3" onmouseover="afficheMenu('secMenu3');" onmouseout="cacheAllMenus();">
<ul>
<li><a href="#" onfocus="afficheMenu('secMenu3');">Sous-Menu 3.1</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu3');">Sous-Menu 3.2</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu3');">Sous-Menu 3.3</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu3');">Sous-Menu 3.4</a></li>
<li><a href="#" onfocus="afficheMenu('secMenu3');">Sous-Menu 3.5</a></li>
</ul>
</dd>
</dl>
</div>
Et mon javascript :
// Affiche le menu d'ID "idMenu"
function afficheMenu(idMenu) {
// On cache tous les menus
cacheAllMenus(idMenu);
// On affiche le menu
var leMenu = document.getElementById(idMenu);
if (leMenu) {
leMenu.style.display = 'block';
}
}
// Cache le menu d'ID "idMenu"
function cacheMenu(idMenu) {
var leMenu = document.getElementById(idMenu);
if (leMenu) {
leMenu.style.display = 'none';
}
}
// Cache tous les menus à l'exception du menu d'ID "idMenu"
function cacheAllMenus(idMenu) {
for (i = 1; i <= 10; i++) {
var idTmp = 'secMenu'+i;
if (document.getElementById(idTmp) && (idMenu != idTmp)) {
cacheMenu(idTmp);
}
} // for i
}
Mon problème est le suivant : si les sous-menus s'affichent sans problème, il arrive par contre qu'ils restent affichés alors que je ne le souhaite pas (ex: on survole "Menu 1", puis on déplace la souris en dehors du menu sans survoler le sous-menu affiché).
J'ai eu plusieurs idées pour corriger le problème :
1° Ajouter un
onmouseover faisant appel à ma fonction
cacheAllMenus()sur les autres
div. Problème : ce n'est pas conforme XHTML et cela ne marche pas sur IE
- Ajouter des
onmouseout faisant appel à ma fonction
cacheAllMenus(). Cela marche bien sous Firefox, mais c'est une catastrophe sous IE (lorsque je passe de "Menu 1" au sous-menu, ce dernier disparait).
Après réflexion, je me suis dis que la 2e solution pourrait marcher à condition de faire un truc du genre :
- lors du
onmouseout, si le nouvel élément survolé est le sous-menu, alors ne rien faire, sinon cacher le sous menu
- faire de même avec le
onblur
C'est pour cette raison que je cherche à savoir s'il est possible de récupérer l'identifiant de l'élément survolé ou "focusé".
Maintenant si quelque voit une autre solution, je suis preneur
).