dimanche 19 juillet 2009

[spip] Menu dépliant sur clic

Voilà encore un menu pour un site Spip, qui donne le contenu des rubriques lorsqu'on clique sur celles-ci, mais sans aller dans la rubrique elle-même. Vous avez un exemple ici. Le top, c'est que le menu déplie la rubrique dans laquelle on se trouve.

Code javascript


function afficheMenu(obj){
var idMenu = obj.id;
var idSousMenu = 'sous' + idMenu;
var sousMenu = document.getElementById(idSousMenu);

if(sousMenu.style.display == "none"){
sousMenu.style.display = "block";
}
else{
sousMenu.style.display = "none";
}
}


Code HTML


<BOUCLE_RecupRub(RUBRIQUES){id_rubrique}>
<div id="ssmenu"> <BOUCLE_Menu(RUBRIQUES){meme_parent}{unique}{par num titre}>
<div class="ssmenu" id="menu#ID_RUBRIQUE" onclick="afficheMenu(this)">
<h4 class="ssmenu"> [(#TITRE|supprimer_numero)]</h4>
</div>
<div id="sousmenu#ID_RUBRIQUE" [(#EXPOSE{style="display:block;",style="display:none;"})] > <B_SsMenu> <div class="sssousmenu"> <ul>
<BOUCLE_SsMenu(ARTICLES){id_rubrique}{par num titre}{doublons nieces}>
[<li> <#EXPOSE{span,a href="#URL_ARTICLE"}[ class="(#EXPOSE)"]>
(#TITRE|supprimer_numero)</#EXPOSE{span,a}></li>] </BOUCLE_SsMenu> </ul> </div></B_SsMenu>
</div> </BOUCLE_Menu>
</div> </BOUCLE_RecupRub>


Code CSS


#ssmenu{ margin:10px 0; width:230px;}
.ssmenu{ display:block; padding:1px 0 3px 3px; background:#ebcccc; color:#000; text-decoration:none; cursor:hand; cursor:pointer; margin:0 0 5px 0; }
.sssousmenu{ width:220px; padding:5px; background:#e0e2e9; color:#000; margin:-10px 0 5px 0; }
.sssousmenu a{ width:100%; height:100%; color:#000; font-size:.9em; text-decoration:none; background:#e0e2e9; margin:0; }

1 commentaires:

Philippe a dit…

Bonjour
Genre de menu que je cherchais, mais avec les rubriques. Il va falloir que je le modifie.

Merci
Philippe