|
Benjamin Lemoine
|
Lundi 30 Janvier 2006 4:16:58 pm
[tuto] Menu vertical dynamique
J'ai récemment créé un menu dynamique en javascript pour mon site.
Ce menu récupère, sur 2 niveaux, tous les répertoires et sous-répertoires se situant sous le noeud principal dans l'arborescence Ez. Exemple :
|+ eZ Publish (dossier racine, node_id=2)
|+ Dossier 1
|+ Sous-dossier 1.1
|+ Sous-dossier 1.2
|+ Dossier 2
|+ Sous-dossier 2.1
|+ Sous-dossier 2.2
|+ Dossier 3
|+ Sous-dossier 3.1
|+ Sous-dossier 3.2
Je mets les sources de base pour en faire profiter tout le monde et je vais essayer d'expliquer au mieux
Ce code est à placer dans le pagelayout.tpl de votre siteaccess.
1°) Nous allons créer notre fonction javascript permettant d'étendre ou contracter nos menus.
Cette fonction ne sera utilisée que lorsque l'utilisateur cliquera sur un onglet du menu.
{literal} est une fonction de eZ permettant d'inclure du Javascript dans son code.
Dans notre pagelayout, insérer le code suivant entre les balises <HEAD></HEAD> :
{literal}
<script type="text/javascript">
<!--
// Fonction d'extension, contraction du menu
function interact(id) {
var d = document.getElementById(id); //permet de récupérer la partie du menu à montrer ou cacher
if (d) { // Si le menu selectionné est caché alors on demande de l'afficher
if (d.style.display == "none" ){
d.style.display = "block";
}
else { //Sinon on demande de le cacher
d.style.display = "none";
}
}
}
//-->
</script>
{/literal}
2°) Maintenant entre les balises <BODY></BODY>, choisissez l'emplacement ou vous souhaitez voir apparaitre votre menu (je ne détaillerai pas la mise en page html / css).
Collez-y le code suivant :
{** Récupération de tous les menus de niveau 1, sous le noeud racine **}
{def $menu1=fetch( 'content', 'list', hash( 'parent_node_id', 2, 'class_filter_type', 'include', 'class_filter_array', array( 'folder' ) ))}
{def $var_menu=0 $smenu='' } {*definition d'une variable pour chacun des menus*}
{foreach $menu1 as $intitule} {*pour chaque dossier de niveau 1*}
{set $var_menu = $var_menu|inc} {*on incrémente la variable $var_menu*}
{set $smenu = concat("smenu", $var_menu)} {*le nom du menu courant devient smenu+$var_menu, par ex: smenu1*}
{*on affiche le dossier de niveau 1, permettant d'afficher le sous-menu $smenu*}
<dt><a href="#" onclick="javascript:interact('{$smenu}');">{$intitule.name}</a></dt>
{*on récupère alors tous les sous-menus de ce dossier*}
{def $menu2=fetch( 'content', 'list', hash( 'parent_node_id', $intitule.node_id ))}
{*on attribue une id à chacun des sous-menus*}
<dd id='{$smenu}'
{*le if suivant permet de vérifier si le contenu affiché fait partie d'un des menus
Si oui, alors le menu correspondant restera ouvert
*}
{if eq($module_result.path[1].text, $intitule.name)}
style="display:block"
{else}
style="display:none"
{/if}>
{*pour chaque sous-menu, on affiche un lien vers la rubrique correspondante*}
{foreach $menu2 as $sous_rub}
<a href={$sous_rub.url_alias|ezurl}>{$sous_rub.name}</a><br>
{/foreach}
{undef $menu2}
</dd>
{/foreach}
{undef $menu1}
Voila, je sais pas si c'est assez clair (c'est pas évident à expliquer), mais si vous rencontrez des problèmes n'hesitez pas à me contacter.
Bonne continuation
Benjamin.
|
[tuto] Menu vertical dynamique
)