20/08/2010, 21:55:14
Voila mes codes:
Le css qui fonctionne comme sur ton site
Et le code du gabarit du menu
Le css qui fonctionne comme sur ton site
Code :
#menu_vert{
width: 950px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-image: url([[root_url]]/images/pattern_menu.png);
background-repeat: no-repeat;
background-position: center top;
}
#menuwrapper{
}
#menuwrapper ul#primary-nav{
width: 950px;
margin: 0 auto;
height: 52px;
position: relative;
}
#menuwrapper ul#primary-nav li{
float: left;
list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
display: block;
float: left;
padding: 5px 12px 5px ;
font-size: 12px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li.menuactive li a{
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
display: block;
}
#menuwrapper ul#primary-nav li ul {
position: absolute;
top: 24px;
left: 66px;
width: 750px;
display: block;
}
#menuwrapper ul#primary-nav li ul li a{
display: none;
float: left;
padding: 5px 12px 5px;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background: none;
z-index:10;
}
#menuwrapper ul#primary-nav li ul{
padding: 0;
display: block;
}
#menuwrapper ul#primary-nav li:hover ul li a{
display: none;
background-image: url([[root_url]]/images/pattern_menu_bas_rouge.png);
background-repeat: repeat-x;
}
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
height:15px;
display: block;
}
#menuwrapper ul#primary-nav li ul#first-second-nav li a{
display: block;
background: none;
z-index:5;
}
#menuwrapper ul#primary-nav li ul li a:hover{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
height:15px;
}
#menuwrapper ul#primary-nav li ul li.menuactive a{
background-image: url([[root_url]]/images/pattern_menu_bas_noir.png);
background-repeat: repeat-x;
}
Et le code du gabarit du menu
Code :
{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader' and $node->haschildren == true}
<li class="sectionheader"><span class="sectionheader">{$node->menutext}</span>{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />{else}
<li>
<a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}