Description
Menu média queries contenant un sous niveau. Utilisation des média queries pour réussir une intégration sur smartphone.
Accessible avec la touche tab, si javascript est activé. Si JS n'est pas activé le menu prend sa forme dépliée.
Télécharger cette exemple (3ko)
Code Html
<nav id="navigation" role="navigation">
<ul id="menu" role="menubar">
<li><a href="#"><span>Blog</span></a> </li><li class="sub"> <a href="#"><span>Features</span></a>
<ul>
<li> <a href="#"><span>Sub cat 1</span></a> </li>
<li> <a href="#" class="current"><span>Sub cat 2</span></a> </li>
<li> <a href="#"><span>Sub cat 3</span></a> </li>
</ul>
</li><li> <a href="#" class="current"><span>Services</span></a> </li><li class="sub"> <a href="#"><span>Archives</span></a>
<ul>
<li> <a href="#"><span>Sub 1</span></a> </li>
<li> <a href="#"><span>Sub 2</span></a> </li>
</ul>
</li><li> <a href="#"><span>Contact</span></a> </li>
</ul>
</nav>
Javascript
Lorsque javascript est activé, alors un attribut class="drop" est ajouté à ul#menu. Ce qui à pour but d'activer le format déroulant du menu.
Le menu est accessible avec la touche tab. Il est aussi possible d'utiliser la combinaison de touche CTRL + SHIFT pour prendre le focus sur le premier élément du menu.
setTimeout() est utilisé pour qu'un sous menu affiché disparaisse avec un temps de retardement.
CSS
Les étiquettes principales sont alignées avec display:inline-block, il faut tenir compte des white-space. Dans cette exemple, les white-space sont supprimés "en collant" les balises fermantes et ouvrantes concernés (exemple : </li><li>). Utiliser le tutoriel de creativejuiz pour d'avantages de solutions sur les white-space.
Le sous-menu est placé avec left: -9999px;. Pas d'utilisation de display:none;.
Média queries
La première chose, est de "verrouiller" la résolution de la page à un ratio de 1:1, avec la balise META suivante :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;">
Médias utilisés...
@media screen and (max-width:999px) { /*L'écran est inférieur à 999px de large. Ainsi de suite...*/ }
@media screen and (max-width:768px) { }
@media screen and (max-width:480px) { }
Contact
Vous pouvez me signaler vos commentaires en m'écrivant un mail