Vendredi 20 Mai 2005 9:25:29 am

Salut,

Voici un menu que j'ai fait, en utilisant des CSS. Il fonctionne avec eZ Publish 3.4.x et 3.5.x.

A+

menu.tpl :

<div id="holdm">
<ul id="nav">
{let page_limit=10
     children=fetch('content','list',
                    hash(parent_node_id,2,
                    limit,$page_limit,
                    offset,$view_parameters.offset,class_filter_type, "include", class_filter_array, array(1)))
     child_count=fetch('content','list_count',hash(parent_node_id,$node.node_id,class_filter_type, "include", class_filter_array, array(1)))}
 
{section name=Child loop=$children last-value}
    <li>
        <a href={$Child:item.url_alias|ezurl}>{$Child:item.name}</a>
    
        {let sub_children=fetch('content','list',hash(parent_node_id,$Child:item.node_id,limit,$page_limit,class_filter_array, array(1)))
            sub_child_count=fetch('content','list_count',hash(parent_node_id,$Child:item.node_id,class_filter_type, "include", class_filter_array, array(1)))}

        {section show = $:sub_child_count|gt(0)}
        <ul>
            {section name=SubChild loop=$:sub_children last-value}
                
                    <li>
                        <a href={$:item.url_alias|ezurl}>{$:item.name}</a>
                        
                        {let sub_sub_children=fetch('content','list',hash(parent_node_id,$:item.node_id,limit,$page_limit,class_filter_type, "include", class_filter_array, array(1)))
                          sub_sub_child_count=fetch('content','list_count',hash(parent_node_id,$:item.node_id,limit,$page_limit,class_filter_type, "include", class_filter_array, array(1)))}
                        {section show = $:sub_sub_child_count|gt(0)}
                            <ul>
        
                            {section name=sub_SubChild loop=$:sub_sub_children last-value}
                                
                                    <li>
                                        <a href={$:item.url_alias|ezurl}>{$:item.name}</a>
                                    </li>
                                
                            {/section}
                           
                            </ul>
                        {/section}
                        {/let}
                        
                        
                        
                    </li>
                
            {/section}
             
            </ul>
        {/section}
        {/let}
    </li>
{/section}

{/let}
</ul>
</div>
<SCRIPT language="javascript" type="text/javascript" src={"javascripts/multimenu.js"|ezdesign}></SCRIPT>

activateMenu = function(nav) {
	if (document.all && document.getElementById(nav).currentStyle) {  
		var navroot = document.getElementById(nav);
        /* Get all the list items within the menu */
        var lis=navroot.getElementsByTagName("LI";  
		for (i=0; i<lis.length; i++) {
            /* If the LI has another menu level */
            if(lis[i].lastChild.tagName=="UL"{
                /* assign the function to the LI */
             	lis[i].onmouseover=function() {		
                   /* display the inner menu */
                   this.lastChild.style.display="block";
      			}
				lis[i].onmouseout=function() {                       
                    this.lastChild.style.display="none";
				}
            }
		}
	}
}

window.onload= function()
{
    activateMenu('nav'); 
}

#holdm{position:absolute; top:67px; left:0px; margin-left:auto; z-index:100; }

#nav{
	list-style: none;
	}

 #nav ul { 
	padding: 0;
	margin:0;
	list-style: none;
    width:12.5em;
    z-index:99;
    position:relative;
    overflow:visible;  
	background-color:#FFFFFF;
	
   }

#nav li { 
    margin:0;   
    position: relative; 
    float:left;
	width: 12.5em;
    display:block;
    height:auto;
	background-color:#E5E5E5; 
}
 
#nav a {
    text-decoration:none; 
    display:block;
    padding: 0.1em;  
    margin:0.2em 0 0.2em 0.1em; 
    background-color:#E5E5E5;
    width:12em; 
    height:1em;
	 font-weight:bold ;
}

#nav a:hover{
    background-color:#FFFFFF; 
    color:#333333;
    background-image:none;
	 font-weight:bold ;
}

#nav ul{
    display:none;   
}

/*all see this */
#nav ul ul, #nav ul ul ul{
    display:none; 
    position:absolute; 
    margin-top:-1.8em; 
    margin-left:12em;
}

/* non-IE browsers see this */
 #nav ul li>ul, #nav ul ul li>ul{
    margin-top:-1.4em; 
 }

#nav li:hover ul ul, #nav li:hover ul ul ul{
    display:none; 
}

#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
    display:block;
}

li>ul { 
	top: auto;
	left: auto;
}

Mercredi 01 Juin 2005 10:32:14 am

Bonjour,

Si je peux me permettre, il suffit de placer le fichier menu.tpl dans le dossier /design/mon_site/template/ et de faire un :

{include uri="design:menu.tpl"} dans la pagelayout.tpl de vote site.

Cordialement.

Stéphane BULLIER