En voyant et en testant les différents types de menu, j'ai eu une petite idée. Faire un petit combo en associant deux types proposés : Switch Vertical et Déroulant vertical.
Le tout en utilisant les menu fournis par le site alsacreations (
http://css.alsacreations.com).
Bref, là on a un bon petit menu compact en CSS dont l'exemple d'affichage est sur un site de test :
--> Adresse : kernchr.free.fr/LiPom/
----> Login : test
----> Mot de pass : azerty
C'est le bloc multimenu1. ^^
Voici le template associé à ce bloc :
<!-- Start multiMenu <{$block.mm}> -->
<style type="text/css">
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#dyn_menu {
width: 100%;
}
#dyn_menu dt {
cursor: pointer;
margin: 2px 0;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#dyn_menu dd {
border: 1px solid gray;
}
#dyn_menu li {
text-align: center;
background: #fff;
}
#dyn_menu li a, #dyn_menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
}
#dyn_menu li a:hover, #dyn_menu dt a:hover {
background: #eee;
}
#dyn_menuA dt {
cursor: pointer;
background: #A9BFCB;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
#dyn_menuA dd {
position :absolute;
z-index: 100;
left : 12em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}
#dyn_menuA li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#dyn_menuA li a, #dyn_menuA dt a {
color: #000;
text-decoration: none;
display: block;
}
#dyn_menuA li a:hover {
text-decoration: underline;
}
</style>
<script language="JavaScript" type="text/javascript" ><!--
window.onload=dyn_montre;
function dyn_montre(id) {
var d = document.getElementById(id);
if (document.getElementById('dyn_smenu')) {document.getElementById('dyn_smenu').style.display='none';}
if (document.getElementById('dyn_smenuA')) {document.getElementById('dyn_smenuA').style.display='none';}
for (var i = 1; i<=30; i++) {
if (document.getElementById('dyn_smenu'+i)) {document.getElementById('dyn_smenu'+i).style.display='none';}
if (document.getElementById('dyn_smenuA'+i)) {document.getElementById('dyn_smenuA'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
function dyn_montreA(id) {
var d = document.getElementById(id);
if (document.getElementById('dyn_smenuA')) {document.getElementById('dyn_smenuA').style.display='none';}
for (var i = 1; i<=30; i++) {
if (document.getElementById('dyn_smenuA'+i)) {document.getElementById('dyn_smenuA'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//--></script>
<{counter start=0 print=false}><{assign var=top value="1"}><{assign var=dl value="0"}><{assign var=dd value="0"}>
<dl id="dyn_menu"><{foreach item=imenu from=$block.contents}>
<{if $submenu == "0"}>
<!-- Main link -->
<{if $dd == 0}><dd id='dyn_smenu<{$count}>'><ul><{/if}><li>
<{counter assign=count print=false}>
<{if $imenu.submenu == "1" OR $imenu.submenu == "2"}>
<{if $dl==1}></ul></dd><{/if}>
<{if $dl == 0}><dl id="dyn_menuA"><{assign var=dl value="1"}><{/if}>
<dt onmouseover="javascript:dyn_montreA('dyn_smenuA<{$count}>');" onmouseout="javascript:dyn_montreA();"><a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>">
<img src="<{$xoops_url}>/modules/multiMenu/script/images/arrow1.gif" align="right" alt="<{$alt_title}>"/>
<{$image}><{$title}>
</a></dt><dd id="dyn_smenuA<{$count}>" onmouseover="javascript:dyn_montreA('dyn_smenuA<{$count}>');" onmouseout="javascript:dyn_montreA();"><ul>
<{else}>
<{if $dl == 1}></ul></dd></dl><{assign var=dl value="0"}><{/if}>
<a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>"><{$image}><{$title}></a>
<{/if}>
<{assign var=top value="0"}><{assign var=dd value="1"}></li>
<{elseif $submenu == "1" OR $submenu == "2"}>
<!-- Sublinks -->
<li><a <{if $linkurl}><{$target}>href="<{$linkurl}>" <{/if}>title="<{$alt_title}>"><{$image}><{$title}></a></li>
<{assign var=top value="0"}>
<{elseif $submenu == "3"}>
<!-- Note -->
<li><div class="menuNote"><{$link}><{$title}><{$image}><{$a}></div></li>
<{assign var=top value="1"}>
<{elseif $submenu == "4"}>
<!-- Categorie -->
<{if $dl == 1}></ul></dd></dl><{/if}><{if $dd == 1}></ul></dd><{/if}><{assign var=top value="1"}><{assign var=dd value="0"}><{assign var=dl value="0"}>
<dt onclick="javascript:dyn_montre('dyn_smenu<{$count}>');"><{$link}><{$title}><{$image}><{$a}></dt>
<{/if}>
<{assign var=submenu value=$imenu.submenu}>
<{assign var=linkurl value=$imenu.linkurl}>
<{assign var=link value=$imenu.link}>
<{assign var=counter value=$count}>
<{assign var=target value=$imenu.target}>
<{assign var=alt_title value=$imenu.alt_title}>
<{assign var=image value=$imenu.image}>
<{assign var=title value=$imenu.title}>
<{assign var=a value=$imenu.a}>
<{/foreach}>
<{if $submenu == "0"}>
<!-- Main link -->
<{if $dd == 0}><dd id='dyn_smenu<{$count}>'><ul><{/if}>
<{counter assign=count print=false}>
<a <{if $linkurl}><{$target}>href="<{$linkurl}>" <{/if}>title="<{$alt_title}>"><{$image}><{$title}></a>
<{assign var=top value="0"}><{assign var=dd value="1"}>
<{elseif $submenu == "1" OR $submenu == "2"}>
<!-- Sublinks -->
<li><a <{if $linkurl}><{$target}>href="<{$linkurl}>"<{/if}> title="<{$alt_title}>"><{$image}><{$title}></a></li>
<{assign var=top value="0"}>
<{elseif $submenu == "3"}>
<!-- Note -->
<li><div class="menuNote"><{$link}><{$title}><{$image}><{$a}></div></li>
<{counter assign=count print=false}>
<{assign var=top value="1"}>
<{elseif $submenu == "4"}>
<!-- Categorie -->
<{if $dd == 1}></ul></dd><{/if}>
<{assign var=top value="1"}>
<dt onclick="javascript:dyn_montre('dyn_smenu<{$count}>');"><{$link}><{$title}><{$image}><{$a}></dt>
<{assign var=dd value="0"}>
<{/if}>
<{if $dd == 1}></ul></dd><{/if}>
</dl>
<!-- End multiMenu <{$block.mm}> -->
Ce n'est pas encore parfais, mais au moins on a un bel apperçu. Il passe mieux sous firefox que sous IE.
J'espère que ce genre de menu va plaire et va être intégré dans le module... ou dù moins l'idée de ce genre de menu bien compacte.
Au passage merci pour la doc sur les templates
