Bonjour un petit post après m'être galerée à faire fonctionner un menu avec sous menu en javascript + css : voici ce qui fonctionne chez moi et peut servir à d'autres (mon css est laborieux, mais bon il fonctionne) :
dans menu html :
<div id="menuGeneral">
<dl id="menu">
<THELIA_MENU_RUBRIQUES type="RUBRIQUE" parent="0" profondeur="1" classement="manuel">
<dt onmouseover="javascript:montre('smenu#ID');">
<a href="#URL">#TITRE</a>
</dt>
<dd class="ssmenu" id="smenu#ID">
<ul>
<THELIA_BLOC_SOUS_MENU type="RUBRIQUE" parent="#ID">
<THELIA_SOUS_MENU_RUBRIQUE type="RUBRIQUE" id="#ID" courante="0">
<li>
<a href="#URL">#TITRE</a>
</li>
</THELIA_SOUS_MENU_RUBRIQUE>
<THELIA_SOUS_MENU_RUBRIQUE_SELECTION type="RUBRIQUE" id="#ID" courante="1">
<li>
<a href="#URL" class="selected" >#TITRE</a>
</li>
</THELIA_SOUS_MENU_RUBRIQUE_SELECTION>
</THELIA_BLOC_SOUS_MENU>
</ul>
</dd>
</THELIA_MENU_RUBRIQUES>
</dl>
</div>
dans meta.html
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery-ui-1.8.9.custom.min.js' type='text/javascript'></script>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=30; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
Evidemment il faut aller télécharger "jquery-ui-1.8.9.custom.min.js" et le glisser dans le dossier "js"
Ensuite direct dans styles.css, j'ai rajouté pour mes besoins et avec mes couleurs ceci que vous pouvez amplement modifier (!!!) :
#menuGeneral
{float: left;
width:200px;
padding: 0;
background-color:#d7292b;
}
#menuGeneral a
{color:#ffffff;
text-decoration: none;
}
#menuGeneral a:hover
{color:#3F3F3F;
text-decoration: none;
}
#menuGeneral dl {
margin: 0;
padding-top: 5px;
padding-left: 0px;
list-style-type: none;
color:#ffffff;
font-size:16px;
font-weight:bold;
}
#menuGeneral dt {
margin: 0;
padding: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
font-weight:bold;
border-bottom: 1px solid #ffffff;
}
#menuGeneral dd {
margin: 0;
list-style-type: none;
color:#ffffff;
font-size:16px;
font-weight:bold;
}
#menuGeneral ul {
margin: 0;
padding: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
font-weight:bold;
background-color:#bbbdbf;
}
#menuGeneral li {
margin: 0;
padding-left: 5px;padding-bottom: 5px;
list-style-type: none;
color:#ffffff;
font-size:16px;
font-weight:bold;
background-color:#bbbdbf;
border-bottom: 1px solid #FFFFFF;
}
Voilà, rien de bien nouveau, juste pour trouver une source complète ça a été un peu compliqué entre ce qui fonctionne à moitié, pas du tout ou juste un peu...
Après à vous de modifier le javascript en faisant des recherches idem pour les boucles et le css...
olivia
Les vices entrent dans la composition des vertus, comme les poisons entrent dans la composition des remèdes.
La Rochefoucauld