[JS] [a11y] Mega menu coulissant version #2 #A11y

by Jean-Baptiste Audras

HTML

<div id="wrap">
<nav>
    <div class="home">        
        <a href="">Home</a>
    </div>
    <div class="panneau">        
        <h2>Item 1</h2>
        <ul>
            <li><a href="">Item 1.1</a></li>
            <li><a href="">Item 1.2</a></li>
            <li><a href="">Item 1.3</a></li>
            <li><input role="search" type="text" placeholder="Rechercher" size="8" /><button>Ok</button></li>
        </ul>
    </div>
    <div class="panneau">        
        <h2>Item 2</h2>
        <ul>
            <li><a href="">Item 2.1</a></li>
            <li><a href="">Item 2.2</a></li>
            <li><a href="">Item 2.3</a></li>
        </ul>
    </div>
    <div class="panneau">        
        <h2>Item 3</h2>
        <ul>
            <li><a href="">Item 3.1</a></li>
            <li><a href="">Item 3.2</a></li>
            <li><a href="">Item 3.3</a></li>
        </ul>
    </div>
    <!--
    <div id="fermer">Fermer le menu</div>
    -->
</nav>
    <section><a href="">Contenu</a></section>
</div>

CSS

#wrap{width:360px;margin:20px 0 0 20px;}
nav{width:360px;background:#ccc;overflow:hidden;}
div.home{width:60px;background:#bbb;float:left;}
div.panneau{width:100px;float:left;}
div.panneau ul{height:120px;}
/* div#fermer{float:right;} */

JavaScript

$('.panneau ul').toggle();
$('#fermer').toggle();
$('nav').hover(function(){
    $('.panneau ul').slideToggle('slow');
    $('#fermer').slideToggle('slow');
});
/*
$('#fermer').click(function() {
    $('.panneau ul').hide();
    $('#fermer').hide();       
});
*/
$('nav a').each(function() {
    $(this).focus(function() {
    $('.panneau ul').show();
    });
});