Forum CMS Made Simple FR
[Résolu]sous menu horizontal apparent sur les pages - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Général (https://forum.cmsmadesimple.fr/forum-10.html)
+--- Sujet : [Résolu]sous menu horizontal apparent sur les pages (/thread-592.html)


[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 11/08/2010

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.7.x
#~ Nom de l'hébergeur :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
bonjour,

J'ai réalisé un menu horizontal et un sous menu également horizontal avec le gabarit cssmenu.tpl

Je me suis inspiré pour les css d'un message posté en 2009 (http://forum.cmsmadesimple.org/index.php/topic,36979.0.html)

Je voudrais que lorsque l'on arrive sur les pages, le sous-menu reste affiché.
J'ai bien essayé à mettre des display: block; dans tous les sens mais je n'y arrive pas
Si quelqu'un a une idée...
En tout cas grâce à ce forum, mon site avance bien, merci à tous..
Je ne peux malheureusement pas faire de lien, car il me faut indiquer une adresse ip spécifique dans mon ordi pour le voir, l'ancien site étant toujours fonctionnel.

Mes css :

Code :
#menuwrapper{    
}

#menuwrapper ul#primary-nav{
    width: 950px;
    margin: 0 auto;
    height: 50px;
    position: relative;
}

#menuwrapper ul#primary-nav li{
    float: left;
    list-style-type: none;
}

#menuwrapper ul#primary-nav li a{
    display: block;
    float: left;
    padding: 3px 12px 5px ;
        font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

#menuwrapper ul#primary-nav li a:hover{
     background: #000;
}

#menuwrapper ul#primary-nav li.menuactive a{
        background: #000;

}

#menuwrapper ul#primary-nav li ul {
    position: absolute;
    top: 22px;
    left: 69px;
    width: 750px;
}

#menuwrapper ul#primary-nav li ul li a{
    display: none;
    float: left;
    padding: 5px 12px 4px;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    background: none;
    z-index:10;
}

#menuwrapper ul#primary-nav li ul{
        padding: 0;
}

#menuwrapper ul#primary-nav li:hover ul li a{
    display: block;
        background-image: 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(images/pattern_menu_bas_gris.png);
    background-repeat: repeat-x;
        height:15px;
}

#menuwrapper ul#primary-nav li ul li.menuactive a{
        background-image: url(images/pattern_menu_bas_gris.png);
    background-repeat: repeat-x;
}


[Résolu]sous menu horizontal apparent sur les pages - bess - 11/08/2010

met en commentaire les

Code :
display: none;
que tu rencontres, ca te facilitera la tâche.

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 13/08/2010

Le menu s'affiche maintenant correctement
Les sous-menus n'apparaissent et reste que lorsque l'on arrive sur les pages
Ça ne fonctionne pas vraiment sur IE 6 mais ça, c'est une autre histoire.

Il me reste à faire en sorte que les sous menus s'affichent au survol de la sourie, je mettrais [résolu] quand ça sera fait, afin d'avoir les deux solutions.
Mais au moins ça marche

merci !

Code :
#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(images/pattern_menu_bas_noir.png);
    background-repeat: repeat-x;
}



#menuwrapper ul#primary-nav li.menuactive a{
        background-image: url(images/pattern_menu_bas_noir.png);
    background-repeat: repeat-x;
        display: block;
}

#menuwrapper ul#primary-nav li.menuactive li  a{
        background-image: 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(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(images/pattern_menu_bas_noir.png);
    background-repeat: repeat-x;
        height:15px;

}

#menuwrapper ul#primary-nav li ul li.menuactive a{
        background-image: url(images/pattern_menu_bas_noir.png);
    background-repeat: repeat-x;
}


[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 13/08/2010

Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6

[Résolu]sous menu horizontal apparent sur les pages - jce76350 - 13/08/2010

re,

>Rectification: je ne sais pas ce que j'ai bricolé, mais ça fonctionne très bien sur IE6
C'est un navigateur obsolète !!!! ne pas utiliser

validateur http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2831

>#~ Version du CMS: 1.7.x
Nota version cms périmée on est en 1.8.2 Wink

[Résolu]sous menu horizontal apparent sur les pages - bess - 13/08/2010

si tout se passe bien, oublie pas [résolu] dans le titre de ton premier message Wink

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 13/08/2010

Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur, c'est un mec qui fait du bateau ......
Merci pour le forum, c'est vraiment bien

[Résolu]sous menu horizontal apparent sur les pages - jce76350 - 13/08/2010

re,

>Je sais qu'il est obsolète, mais va dire ça aux clients qui pensent qu'un navigateur
ben ... tu es la pour les former ces "gentils" utilisateurs

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 19/08/2010

j'essaye de finir mon menu, mais j'ai du mal.
Tout fonctionne :
- le sous menu reste présent quand on est sur une page
- les boutons du menu et du sous menu restent bien d'une couleur différente pour indiquer dans quelle page on est
- quand on survole le menu, les sous menus apparaissent bien

Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.


Voila le nouveau code ( j'ai upgradé vers la version 8.2)


#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;

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 ul a{
padding: 0;
display: none;
}


#menuwrapper ul#primary-nav li:hover ul li a{
display: block;
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;

}




Merci !!!!!

[Résolu]sous menu horizontal apparent sur les pages - airelibre - 19/08/2010

Bonjour,

As-tu un lien à nous transmettre pour qu'on puisse voir tout ca avec Firebug ?

Merci Wink

[Résolu]sous menu horizontal apparent sur les pages - bess - 20/08/2010

attend un peu :

Citation :Mais le problème, c'est que quand on survole les autres boutons du menu, les sous menu apparaissent, mais le sous menu de la page active ne disparait pas.

tu sais que c'est normal ? ce que tu veux faire relève du JS et non du CSS...

tu nous as demander d'afficher automatiquement les sous menu d'une page active en css... c'est fait ! le css ne ferra rien d'autre, et certainement pas un "si je survole tel champs alors j'en cache d'autre"

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 20/08/2010

Je vais chercher ce week-end et je mettrais résolu ensuite
Je n'ai pas le lien, car je suis sur un serveur de test tant que le site n'est pas fini.
Disons que dans le premier code en haut. ça donne ceci :http://www.brightfuture.be/
Ça marche très bien.
Maintenant, je veux arriver à cela : http://www.cssplay.co.uk/menus/simple_dropline.html?current=three&sub=e
Avec le deuxième code, ça marche aussi sauf que le sous menu actif ne disparait pas quand on survole les autres boutons du menu.

[Résolu]sous menu horizontal apparent sur les pages - bess - 20/08/2010

tu as regardé 2s le code généré ?

dans une page X tu n'as aucun code généré qui correspond aux enfants des autres menus (même caché). Ce n'est donc pas étonnant que tu n'arrives pas a les afficher. Le début de ton soucis n'est pas CSS mais template .

[Résolu]sous menu horizontal apparent sur les pages - Jean le Chauve - 20/08/2010

Je vais regarder ça ce weekend.
Dons si ce n'est pas exactement comme sur le site cssplay : http://www.cssplay.co.uk/menus/simple_dropline.html?current=three&sub=e dis-le que je ne perde pas du temps inutilement.
N'oublie pas que ce menu n'accepte que deux niveaux, il te faudra passer par une navigation (latérale) pour les sous-menus.

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 20/08/2010

Salut, c'est toi qui a fait le menu sur http://www.brightfuture.be (Tu m'as déjà sauver la mise une fois, merci, j'ai l'impression de voir Zoro arriver…)
C'est exactement le même que sur ton site .
Sauf que je veux ajouter la possibilité d'afficher les sous menus au survole du menu, donc, oui comme sur le site cssplay.

Je mettrais le lien pour le site quand il sera fini, j'apprend beaucoup sur cmsms depuis peu, j'ai hâte de pouvoir aider les autres comme vous le faites tous.

[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 20/08/2010

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}


[Résolu]sous menu horizontal apparent sur les pages - Jean le Chauve - 21/08/2010

Tu n'as pas choisi le plus facile Wink
L'algorithme n'est pas optimisé, mais ça tourne.
Voir en action : http://www.menus-cmsms-madesimple.be/menuLolo/pageenfant2.html
Le code est valide sous IE5.5 -> IE7 mais je n'ai pas pu tester sur IE8 (faudra peut-être modifier les commentaires conditionnels <!--[if IE 7]>)
Code :
{if $count > 0}
<div id="nav">
{assign var="parentActif" value=0}
{foreach from=$nodelist item=node}
{if $node->index == 0}{assign var="prevnode" value=$node}{/if}
{assign var='current' value='<ul class="sub">'}
{if $node->current or $node->parent}{assign var="parentActif" value=$node->hierarchy|truncate:2:""}{/if}
{if $node->depth > $node->prevdepth}
     {if $prevnode->parent or $prevnode->current}{assign var="current" value='</li></ul><ul class="sub_active">'}
     {/if}
{$current}
{elseif $node->depth < $node->prevdepth and $prevnode->hierarchy|truncate:2:"" != $parentActif}
{repeat string='</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>' times=$node->prevdepth-$node->depth}
{elseif $node->depth < $node->prevdepth and $node->hierarchy|truncate:2:"" == $parentActif}
{repeat string='</li></ul>' times=$node->prevdepth-$node->depth}
{elseif $node->index > 0  and ($node->current == false and !$node->parent)}
</li>
{elseif $node->index > 1 }</li>
{/if}
{if $node->depth == 1 and ($node->current or $node->parent) and $node->index > 0}
</ul><ul class="current">
{elseif $node->depth == 1 and  ($node->current or $node->parent) and $node->index == 0}
<ul class="current">
{elseif $node->depth == 1 and $node->index > 0 and $node->hierarchy|truncate:2:"" != $parentActif}
</ul><ul class="select">
{elseif $node->depth == 1}
<ul class="select">
{/if}
{if $node->parent or ($node->current and $node->haschildren)}
<li class="menuactive menuparent">
<a class="menuactive menuparent"
{elseif $node->current}
<li class="current_sub">
<a class="menuactive"
{elseif $node->haschildren}
<li class="menuparent">
<a class="menuparent"
{else}
<li>
<a {/if}
{if $node->target}target="{$node->target}" {/if}
{if $node->depth == 1 and $node->hierarchy|truncate:2:"" != $parentActif and $node->haschildren}
href="{$node->url}">{$node->menutext}<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
{elseif $node->depth == 1 and $node->hierarchy|truncate:2:"" == $parentActif}
href="{$node->url}">{$node->menutext}</a>
{else}
href="{$node->url}">{$node->menutext}</a>
{/if}
{assign var="prevnode" value=$node}
{/foreach}
{if !$node->parent}
{repeat string='</li></ul>' times=$node->depth-1}
{/if}
{if $node->hierarchy|truncate:2:"" != $parentActif}<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>{/if}
<div class="clearb"></div>
</div>
{/if}
Appeler le menu avec le paramètre : {menu template='menuLOLO' number_of_levels='2'}

css :
Code :
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_dropline.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* for this demo only */
#nav {margin:20px 0 80px 0;}

/* the styling */
#nav {width:750px; height:20px; background:#000; position:relative;}

#nav .select, #nav .current {margin:0; padding:0; list-style:none;}

#nav li {display:inline; margin:0; padding:0; height:auto;}

#nav .select a,
#nav .current a {display:block; height:20px; float:left; background:#000; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#fff;}
* html #nav .select a, * html #nav .current a {width:1px; height:21px;}


#nav .select a:hover,
#nav .select li:hover a {background:#888; cursor:pointer; color:#ff0;}

#nav .sub {display:none;}

/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}

#nav .current a {background:#666; color:#ff0;}


#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#888; color:#ff0;}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#666; color:#ff0;}

#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:750px; top:20px; left:0; background:#888; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}

#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}

#nav .sub_active {display:block; position:absolute; width:750px; top:20px; left:0; background:#666; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}

#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#666; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#888; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}


[Résolu]sous menu horizontal apparent sur les pages - lolo61 - 22/08/2010

Cool, ça marche bien.
Je l'ai adapté au graphisme de mon site et c'est parfait.
Je vais essayer de bidouiller quelque chose pour que lorsque que l'on survole les menus où il n'y a pas de sous menus, la barre du bas ne s'affiche pas.
Ce genre de menu est très courant et les templates que j'ai trouvé n'étaient pas simple à mettre en oeuvre.
Mille fois Merci...