[JS] [a11y] Mega menu coulissant avec lien d'évitement vers la recherche version #4 #a11y

by Jean-Baptiste Audras

HTML

<a href="#evit-recherche" class="ouvrir-recherche">Aller à la recherche</a>
<div id="wrap">
<header>Maxi menu de navigation</header>
<div id="acces-menu"><a href="">Home</a> | <a href="" title="Accèder au menu de navigation" class="ouvrir-menu">Accèder au menu de navigation</a></div>
<nav id="menu">
    <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><a href="">item 1.4</a></li>
    </ul>
    <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>
        <li><a href="">item 2.4</a></li>
        <li><a href="">item 2.5</a></li>
        <li><a href="">item 2.6</a></li>
    </ul>
    <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>
        <li><a href="">item 3.4</a></li>
    </ul>
    <div class="fermer-menu">
        <a href="#evit-recherche" name="evit-recherche" id="evit-recherche"></a>
        <input type="text" placeholder="Rechercher" name="recherche" id="recherche" /><button>Ok</button> – <a href="" title="Fermer le menu de navigation">Fermer le menu</a></div>
</nav>
<section>Du contenu et un <a href="">lien</a> hypertexte</section>
</div>

CSS

a{text-decoration:none;}a:hover, a:focus{text-decoration:underline;}
body{background:#ccc;}
#wrap{width:360px;background:#ccc;margin:20px;}
header{padding: 10px;background:#fc0;text-align:center}
#acces-menu{background:#000;padding:10px;}
#acces-menu a{color:#fff;}
nav {margin-top:10px;padding:10px;background:#fce;overflow:hidden;}
nav ul{float:left;width:100px;}
.fermer-menu {clear:both;text-align:right;position:relative;top:10px;}
section{margin-top:10px;padding:20px;background:#fff;clear:both;}

JavaScript

$('#menu').hide();
$('.ouvrir-menu').click(function(){
    $('#menu').slideToggle('slow');
    return false;
});
$('.ouvrir-recherche').click(function(){
    $('#menu').show();
    $('#recherche').focus();
    return false;
});
$('.fermer-menu a').click(function(){
    $('#menu').slideToggle('slow');
    return false;
});