Country / Dev

Vous avez sûrement déjà fait un menu déroulant en CSS/(x)HTML (ul/li , :hover, etc. enfin vous voyez de quoi je parle).

Problème : sur ce genre de menu si vous essayer de naviguer au clavier, alors vous ne pouvez pas voir les liens des sous-menu. Alors voila un petit truc pour les afficher dans ce cas là.

Attention : J’utilise ici la librairie javascript Mootools 1.2 Beta 2, mais ce code est facilement réalisable avec une autre librairie (ou sans librairie).

Code

On considère que le code de notre menu est de cette forme :

<ul id="menu">
    <li class="sub">
        <span>Menu 1</span>
        <ul>
	        <li><a href="#">Category 1.1</a></li>
	        <li><a href="#">Category 1.2</a></li>
	        <li><a href="#">Category 1.3</a></li>
	        <li><a href="#">Category 1.4</a></li>
        </ul>
    </li>
    <li class="sub">
        <span>Menu 2</span>
        <ul>
	        <li><a href="#">Category 2.1</a></li>
	        <li><a href="#">Category 2.2</a></li>
	        <li><a href="#">Category 2.3</a></li>
	        <li><a href="#">Category 2.4</a></li>
        </ul>
    </li>
</ul>

Nous allons ajouter des évènements lorsqu’un des liens du menu recevra le focus ou le perdra :

$$('#menu a').addEvent('focus',function(){
        this.getParent('.sub').addClass('active');
});$$('#menu a').addEvent('blur',function(){
        this.getParent('.sub').removeClass('active');
});

Ces évènement ajoutent au sous-menu “sub” (parent du lien) une classe CSS qui affichera ce menu lorsqu’un de ses liens enfant aura le focus, et supprimera cette classe lorsqu’il perdra celui-ci. Et…c’est tout, pas besoin de plus

Résultat

Vous pouvez voir un exemple du menu ici.