Fork me on GitHub

Rapport de message :*
 

Re: [TEST] multiMenu 1.8 beta, quand multiMenu devient dynamique

Titre du sujet : Re: [TEST] multiMenu 1.8 beta, quand multiMenu devient dynamique
par PinMaster sur 03/02/2006 13:51:04

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">
dldtddulli {
margin0;
padding0;
list-
style-typenone;
}
#dyn_menu {
width100%;
}
#dyn_menu dt {
cursorpointer;
margin2px 0;
height20px;
line-height20px;
text-aligncenter;
font-weightbold;
border1px solid gray;
background#ccc;
}
#dyn_menu dd {
border1px solid gray;
}
#dyn_menu li {
text-aligncenter;
background#fff;
}
#dyn_menu li a, #dyn_menu dt a {
color#000;
text-decorationnone;
displayblock;
border0 none;
}
#dyn_menu li a:hover, #dyn_menu dt a:hover {
background#eee;
}

#dyn_menuA dt {
cursorpointer;
background#A9BFCB;
border1px solid gray;
text-aligncenter;
font-weightbold;
}

#dyn_menuA dd {
position :absolute;
z-index100;
left 12em;
margin-top: -1.4em;
width10em;
background#A9BFCB;
border1px solid gray;
}

#dyn_menuA li {
text-aligncenter;
font-size85%;
height18px;
line-height18px;
}
#dyn_menuA li a, #dyn_menuA dt a {
color#000;
text-decorationnone;
displayblock;
}

#dyn_menuA li a:hover {
text-decorationunderline;
}
</
style>

<
script language="JavaScript" type="text/javascript" ><!--
window.onload=dyn_montre;
function 
dyn_montre(id) {
var 
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 
1i<=30i++) {
        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 
document.getElementById(id);
    if (
document.getElementById('dyn_smenuA')) {document.getElementById('dyn_smenuA').style.display='none';}
    for (var 
1i<=30i++) {
        if (
document.getElementById('dyn_smenuA'+i)) {document.getElementById('dyn_smenuA'+i).style.display='none';}
    }
if (
d) {d.style.display='block';}
}
//--></script>
<{counter start=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();"><<{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}>
        <
<{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><<{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}>
        <
<{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><<{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
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

52 Personne(s) en ligne (41 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 52 | Plus ...