Ce code qui est une démo pour ton traitement javascript, il faut juste que tu récupères si tu ne l'a pas déjà jquery-1.6.1-min.js (ou une autre version d'ailleurs) et que tu modifies ligne 4 le chemin vers celui-ci...
façon parmi d'autres qui repose sur les niveaux de classe qui sont générés par Automne, le script effectue le traitement à partir de ces niveaux...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1-min.js" ></script>
<style>
/* quelques réglages css basiques pour l'exemple */
ul { amrgin:0 ; padding:0;}
ul li {list-style:none outside none;}
li.lvl1 { float:left;}
li.lvl1 a { display:block;border:solid 1px #000; width:100px; height:50px;}
ul.lvl2 { display:block; position:absolute; top:51px;}
ul.lvl2 a { display:block; width:100px; height:50px;}
li.lvl1 { position:relative;}
li.lvl2 { position:absolute;}
/* les classes pour personnaliser tes menus */
.couleur0 { background:#FF0000;}
.couleur1 { background:#00FF00;}
.couleur2 { background:#0000FF;}
</style>
<script type="text/javascript">
$(document).ready(function(){
// recherches de tous les éléments li qui ont la classe lvl1
$('li.lvl1').each(function(i){
// ajout de la classe couleur0 au premier onglet, couleur 1 au second ...
$(this).addClass('couleur'+[i]);
// ajout de la classe couleur0 aux enfants li de l'onglet 1, ...
$(this).children('ul').children('li').addClass('couleur'+[i]);
});
});
</script>
</head>
<body>
<ul id="menuMultiColor" class="lvl1">
<li class="lvl1"><a class="menu">Menu 1</a>
<ul class="lvl2">
<li><a>sous-menu 1</a></li>
<li><a>sous-menu 2</a></li>
</ul>
</li>
<li class="lvl1"><a>Menu 2</a>
<ul class="lvl2">
<li><a>sous-menu 1</a></li>
</ul>
</li>
<li class="lvl1"><a>Menu 3</a></li>
</ul>
</body>
</html>
Après tu peux traiter en CSS les hover sur les classes couleur0, couleur1 et ainsi de suite...
Bon c'est un truc fait rapidement, ça peut être amélioré par la suite...
Connexion
FAQ
Rechercher
