Bonjour,
Je voulais reproduire un menu identique à celui proposé par
Alsacréation sur 2 niveaux.
j’ai trouvé la solution. Un peu grâce à
TylerD qui m’a mis sur la voie :
J’utilise Wayfinder avec plusieurs templates.
1er niveau :
- wfOuter :
<dl id="menu_V">
[+wf.wrapper+]
</dl>
- wfRow :
<dt onmouseover="javascript:montre('smenu[[GetField? &docid=[+wf.docid+] &parent=`1` &parentLevel=`1` &field=`id` ]]');" onmouseout="javascript:montre();"><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></dt>
<dd id="smenu[+wf.docid+]" onmouseover="javascript:montre('smenu[[GetField? &docid=[+wf.docid+] &parent=`1` &parentLevel=`1` &field=`id` ]]');" onmouseout="javascript:montre();">[+wf.wrapper+]</dd>
- wfHere :
<dt class="here" onmouseover="javascript:montre('smenu[[GetField? &docid=[+wf.docid+] &parent=`1` &parentLevel=`1` &field=`id` ]]');" onmouseout="javascript:montre();"><span>[+wf.linktext+]</span></dt>
<dd id="smenu[+wf.docid+]" onmouseover="javascript:montre('smenu[[GetField? &docid=[+wf.docid+] &parent=`1` &parentLevel=`1` &field=`id` ]]');" onmouseout="javascript:montre();">
[+wf.wrapper+]
</dd>
- wfInner :
<ul[+wf.classes+]>[+wf.wrapper+]</ul>
- wfInnerRow :
<li><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a>[+wf.wrapper+]</li>
- wfInnerHere :
<li class="here"><span>[+wf.linktext+]</span>[+wf.wrapper+]</li>
J’appelle le snippet Wayfinder :
[[Wayfinder? &startId=`0` &level=`2` &lastClass=`` &outerTpl=`wfOuter` &rowTpl=`wfRow` &hereTpl=`wfHere` &innerTpl=`wfInner` &innerRowTpl=`wfInnerRow` &innerHereTpl=`wfInnerHere` &outerClass=`menu` &hereClass=`here` &levelClass=`smenu` ]]
Il faut bien entendu insérer le fichier js (que j’ai nommé displaymenu.js) dans les balises <head> :
<script type="text/javascript" src="assets/js/displaymenu.js" ></script>
ainsi que le fichier css (que j’ai nommé displaymenu.css)
<link rel="stylesheet" href="assets/templates/site/displaymenu.css" type="text/css" media="screen" />
Voila le menu s’affiche comme indiqué sur Alsacréation
Un dernier détail : cette solution fonctionne avec le snippet GetField, n’oubliez pas de l’installer
