Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[Résolu]sous menu horizontal apparent sur les pages
#16

Voila mes codes:

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}
Sujet fermé


Messages dans ce sujet

Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)