Apprenez à intégrer un menu Html/Css compatible sur tous les navigateurs avec seulelement 12 lignes de javascript.
Présentation
Je vous présente ici un petit code bien sympa qui va vous permettre d’afficher un menu déroulant en html/Css et javascript d’une simplicité déconcertante (Voir une démo).
Et oui sachez déjà que ce menu ne va nécéssiter « seulement » que 12 lignes de javascript sans faire appel à des librairies de scripts.
Bien entendu ce menu n’est pas « impréssionant » au point de vue du design, ne vous attendez donc pas à une explosion d’effets…
En tout cas il se prête parfaitement à des sites simples, en effet son poid final est extrêmement léger, le tout pèse moins de 4k !
L’autre avantage est que la customisation Css est très facile, j’ai pu l’utiliser lors d’un projet pro et je n’ai connu aucuns problèmes d’intégration.
Le dernier point est qu’en seulement 12 lignes de Javascript, ce petit menu arrive à faire accepter à Internet explorer la pseudo class :hover.
Ne vous inquiétez donc pas pour la compatibilité entre les navigateurs…
4 adjectifs pour résumé tout ça:
Simplicité/accessibilité/compatibilité/legereté !
Le Html
<html> <body> <ul id="nav"> <li><a href="#">Percoidei</a> <ul> <li><a href="#">Remoras</a> <ul> <li><a href="#">Echeneis</a></li> <li><a href="#">Phtheirichthys</a></li> <li><a href="#">Remora</a></li> <li><a href="#">Remorina</a></li> <li><a href="#">Rhombochirus</a></li> </ul> </li> <li><a href="#">Tilefishes</a> <ul> <li><a href="#">Caulolatilus</a></li> <li><a href="#">Lopholatilus</a></li> <li><a href="#">Malacanthus</a></li> </ul> </li> <li><a href="#">Bluefishes</a> <ul> <li><a href="#">Pomatomus</a></li> <li><a href="#">Scombrops</a></li> <li><a href="#">Sphyraenops</a></li> </ul> </li> <li><a href="#">Tigerfishes</a> <ul> <li><a href="#">Amniataba</a></li> <li><a href="#">Bidyanus</a></li> <li><a href="#">Hannia</a></li> <li><a href="#">Hephaestus</a></li> <li><a href="#">Lagusia</a></li> <li><a href="#">Leiopotherapon</a></li> <li><a href="#">Mesopristes</a></li> <li><a href="#">Pelates</a></li> <li><a href="#">Pelsartia</a></li> <li><a href="#">Pingalla</a></li> <li><a href="#">Rhyncopelates</a></li> <li><a href="#">Scortum</a></li> <li><a href="#">Syncomistes</a></li> <li><a href="#">Terapon</a></li> </ul> </li> </ul> </li> <li><a href="#">Anabantoidei</a> <ul> <li><a href="#">Climbing perches</a> <ul> <li><a href="#">Anabas</a></li> <li><a href="#">Ctenopoma</a></li> </ul> </li> <li><a href="#">Labyrinthfishes</a> <ul> <li><a href="#">Belontia</a></li> <li><a href="#">Betta</a></li> <li><a href="#">Colisa</a></li> <li><a href="#">Macropodus</a></li> <li><a href="#">Malpulutta</a></li> <li><a href="#">Parosphromenus</a></li> <li><a href="#">Pseudosphromenus</a></li> <li><a href="#">Sphaerichthys</a></li> <li><a href="#">Trichogaster</a></li> <li><a href="#">Trichopsis</a></li> </ul> </li> <li><a href="#">Kissing gouramis</a></li> <li><a href="#">Pike-heads</a></li> <li><a href="#">Giant gouramis</a></li> </ul> </li> <li><a href="#">Gobioidei</a> <ul> <li><a href="#">Burrowing gobies</a></li> <li><a href="#">Dartfishes</a></li> <li><a href="#">Eellike gobies</a></li> <li><a href="#">Gobies</a></li> <li><a href="#">Loach gobies</a></li> <li><a href="#">Odontobutidae</a></li> <li><a href="#">Sandfishes</a></li> <li><a href="#">Schindleriidae</a></li> <li><a href="#">Sleepers</a></li> <li><a href="#">Xenisthmidae</a></li> </ul> </li> </ul> </body> </html>
Le javascript
N’oubliez pas de le mettre dans les balises <head></head> 
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Le Css
N’oubliez pas de le mettre dans les balises <head></head>
<style type="text/css">
body {
font-family: arial, helvetica, serif;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}
#nav a {
display: block;
width: 10em;
}
#nav li { /* all list items */
float: left;
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
clear: left;
color: #ccc;
}
</style>
Ce code provient de l’article « The original Suckerfish Dropdowns » publié dans A List Apart
Voir une démo
Ceux qui ont aimé cet article ont aussi apprécié :
