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>
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