Menu déroulant horizontal et onfocus/onblur

Question

Polack

14 Feb 2006 à 15:43

Bonjour,

Je me suis inspiré du tutorial d'Alsacréations pour faire un menu déroulant horizontal et tout marche très bien. J'ai toutefois une question au sujet de la remarque de Chantal sur l'accessibilité :

a écrit :
N’oubliez pas non plus que toutes les fonctionnalités activées par un événement doivent être indépendant de l’outil utilisé. En effet, il est recommandé d’utiliser onfocus et onblur en complément de onmouseover et onmouseout par exemple.

Comment faire dans ce cas? En effet, les événements onfocus et onblur ne s'appliquent pas aux balises dl, dd et dl. Pour ma part, j'ai ajouté une balise a à l'intérieur du dt, ce qui donne le code (X-)HTML suivant :

    <div id="menu">
        <dl>
            <dt><a href="#" title="Retour à l'accueil">Accueil</a></dt>
        </dl>
        <dl>
            <dt onmouseover="afficheMenu('secMenu1');" onmouseout="cacheMenu('secMenu1');">
                <a href="#" title="Menu 1" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Menu 1</a>
            </dt>
            <dd id="secMenu1" onmouseover="afficheMenu('secMenu1');" onmouseout="cacheMenu('secMenu1');">
                <ul>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.1</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.2</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.3</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.4</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.5</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu1');" onblur="cacheMenu('secMenu1');">Sous-Menu 1.6</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt onmouseover="afficheMenu('secMenu2');" onmouseout="cacheMenu('secMenu2');">
                <a href="#" title="Menu 2" onfocus="afficheMenu('secMenu2');" onblur="cacheMenu('secMenu2');">Menu 2</a>
            </dt>
            <dd id="secMenu2" onmouseover="afficheMenu('secMenu2');" onmouseout="cacheMenu('secMenu2');">
                <ul>
                    <li><a href="#" onfocus="afficheMenu('secMenu2');" onblur="cacheMenu('secMenu2');">Sous-Menu 2.1</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu2');" onblur="cacheMenu('secMenu2');">Sous-Menu 2.2</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu2');" onblur="cacheMenu('secMenu2');">Sous-Menu 2.3</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu2');" onblur="cacheMenu('secMenu2');">Sous-Menu 2.4</a></li>
                </ul>
            </dd>
        </dl>
        <dl>
            <dt onmouseover="afficheMenu('secMenu3');" onmouseout="cacheMenu('secMenu3');">
                <a href="#" title="Menu 3" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Menu 3</a>
            </dt>
            <dd id="secMenu3" onmouseover="afficheMenu('secMenu3');" onmouseout="cacheMenu('secMenu3');">
                <ul>
                    <li><a href="#" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Sous-Menu 3.1</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Sous-Menu 3.2</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Sous-Menu 3.3</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Sous-Menu 3.4</a></li>
                    <li><a href="#" onfocus="afficheMenu('secMenu3');" onblur="cacheMenu('secMenu3');">Sous-Menu 3.5</a></li>
                </ul>
            </dd>
        </dl>
    </div>

Qu'en pensez-vous?

<edit>
Je viens de me rendre compte que ça marche mal sur IE. Le sous-menu se ferme dès que j'appuie sur tabulation pour passer du titre du sous-menu (ex: Menu 1) au premier élément du sous-menu (ex: Sous-menu 1.1). La faute à l'événement onblur dans la balise a (dans le Smiley dt

). Comment faire?

De même, je rencontre des problèmes sous Opera. La tabulation me permet seulement de passer du select à mon input (dans ma div "accessibilite"). C'est moi qui ne sait pas naviguer au clavier sous Opera ou le problème est ailleur?
</edit>
Modifié par Polack (14 Feb 2006 - 17:08)

Polack

15 Feb 2006 à 09:47

Je viens de me rendre compte que je n'avais pas forcément créé mon sujet dans le bon forum.

L'introduction de la balise a pour permettre d'utiliser les événements onblur et onfocus aurait plutôt sa place dans HTML, XHTML, sémantique web.

Pour ce qui est du fonctionnement du menu et des problèmes que je rencontre avec IE et Opera, je pense que ça concerne DOM, JavaScript, ECMAScript.

Désolé donc... Smiley langue

Un modérateur/administrateur aurait-il la bonté de réparer mon erreur?

Polack

15 Feb 2006 à 10:04

Bon, en cherchant un peu j'ai trouvé la solution à mon problème.

Mon code HTML :

<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');">
            <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');">
            <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>
                <li><a href="#" onfocus="afficheMenu('secMenu2');">Sous-Menu 2.4</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');">
            <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>

Mon code javascript :

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';
    }
}

function cacheMenu(idMenu) {
    var leMenu = document.getElementById(idMenu);
    if (leMenu) {
        leMenu.style.display = 'none';
    }
}

function cacheAllMenus(idMenu) {
   for (i = 1; i <= 10; i++) {
       var idTmp = 'secMenu'+i;
       if (document.getElementById(idTmp) && (idMenu != idTmp)) {
           cacheMenu(idTmp);
       }
   } // for i
}

Voili voilou...

PS : J'attend encore un peu pour mettre résolu. J'aimerais avoir une réponse concernant mon choix d'inclure des balises a pour permettre l'utilisation des évenements onblur et onfocus.
Modifié par Polack (15 Feb 2006 - 10:04)

Sujet clos

CSS et mise en forme, CSS3

Menu déroulant horizontal et onfocus/onblur