Menu et sous menu horizontal persistant

[Xarkam]

Bonjour
Je suis actuellement en phase de développement de plusieurs sites qui doivent utiliser le même genre de menu.

Le premier niveau de menu horizontalement (jusque la tout va très bien le menu est fait avec son style css)
Mais je doit avoir un sous menu qui doit apparaitre sous le premier et rester lorsque l'on sélectionne un élément du premier menu.

Une idée du chemin à suivre pour réaliser cela ?

[Pierre M.]

Avez-vous vu les "CSS menus" du contenu de démonstration ? Connaissez-vous le "themes site" et son menu-howto ?
Avez-vu lu la doc du "Menu Manager" ?

Je pense que vous arriverez à vos fins en adaptant légèrement (couleurs) les menus CSS de démo. Eventuellement en modifiant les paramètres de point de départ et de profondeur. Il suffit de quelques appels {menu...} et de gabarit de menu adapté. Posez des questions précises avec ces appels et ces gabarits là où vous en êtes, où vous voulez aller et là où ça coince.

Pierre M.

[Jean le Chauve]

A peu près ceci : http://www.brightfuture.be/ ?
menu :

Code: Select all

{if $count > 0}
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul id="first-second-nav">' 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->current == true}
	    <li class="menuactive"><a 
        {else}
	<li><a 
        {/if}
        {if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}/" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn>{$node->menutext}</a>
{/if}
{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
	</ul>
<div class="clearb"></div>
{/if}

css

Code: Select all

/*** NAVIGATION ***/
#menuwrapper{
	background: #2A2731 url(../images/bg-nav.png) repeat-x 0 0;
}

#menuwrapper ul#primary-nav{
	width: 800px;
	margin: 0 auto;
	height: 65px;
	position: relative;
}
#menuwrapper ul#primary-nav li{
	float: left;
	list-style-type: none;
}
#menuwrapper ul#primary-nav li a{
	display: block;
	float: left;
	padding: 12px 9px 12px;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	text-decoration: none;
}
#menuwrapper ul#primary-nav li a:hover, #menuwrapper ul#primary-nav li.menuactive a{
	background: #4E4A56;
}
#menuwrapper ul#primary-nav li ul {
	position: absolute;
	top: 36px;
	left: 0px;
	width: 800px;
}

#menuwrapper ul#primary-nav li ul li a{
	display: none;
	float: left;
	padding: 9px 9px 7px;
	font-size: 1.2em;
	font-weight: normal;
	color: #d1d7c6;
	text-decoration: none;
	background: none;
	z-index:10;
}

#menuwrapper ul#primary-nav li ul{
	background: #4E4A56;
}

#menuwrapper ul#primary-nav li:hover ul li a, #menuwrapper ul#primary-nav li.menuactive:hover ul li a{
	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, #menuwrapper ul#primary-nav li ul li.menuactive a{
	color: #fff;
}

[Xarkam]

Avez-vous vu les "CSS menus" du contenu de démonstration ? Connaissez-vous le "themes site" et son menu-howto ?
Avez-vu lu la doc du "Menu Manager" ?

Je pense que vous arriverez à vos fins en adaptant légèrement (couleurs) les menus CSS de démo. Eventuellement en modifiant les paramètres de point de départ et de profondeur. Il suffit de quelques appels {menu...} et de gabarit de menu adapté. Posez des questions précises avec ces appels et ces gabarits là où vous en êtes, où vous voulez aller et là où ça coince.

Pierre M.

Bonsoir, je suis parti de la partie menu css fourni avec le theme NCleanblue pour avoir le menu horizontale.
Je suis passé par la page du howto qui est succincte.
Pour la doc, j'ai commencé à lire http://wiki.cmsmadesimple.org/index.php ... Manager/fr en début d'aprem.

@Jean le Chauve: c'est ce genre la que je recherche

[Jean le Chauve]

Et bien, tu n'as plus qu'à modifier la css que je t'ai donnée pour qu'elle corresponde parfaitement à tes désirs.
Ça ne devrait plus te prendre trop de temps, maintenant.
Pour appeler le menu dans le gabarit, utilise : {menu template="tonMenu" collapse="1"}
Je te mettrai les css spécifiques pour IE si besoin en est.

[Xarkam]

Merci Jean le Chauve.
Mon HDD ayant claqué hier, je viens d'en mettre un new, mais le temps de mettre xp, seven, debian et frugalware, j'en ai pour 2 jrs (en plus je pense que mon lecteur de dvd à pris un coup, donc cela à du venir d'une sur-tension)

Mais ne t'en fait pas, je te tient au courant de mon avancée.

[Pierre M.]

C'est effectivement généralement une bonne idée de partir d'un bon thème/gabarit/CSS existant et d'en faire une copie à dériver. Ainsi, on capitalise sur la conformité W3C, l'accessibilité, l'ergonomie, l'ajustement selon caprices de navigateurs, etc.

Au passage, je parlais aussi de http://themes.cmsmadesimple.org/Howto.html

Pierre M.

[Xarkam]

Bonjour,
je reviens avec des nouvelles.

@Jean le Chauve:
J'ai mis ton code de menu que j'ai adapté (rajouté des autour des ainsi qu'une class pour le lien actif)
J'ai ensuite fait la css en me basant sur la tienne, mais voila, la sous liste reste affichée.

Voici le code du menu et de la css:
Menu

Code: Select all

{if $count > 0}
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string='<ul id="first-second-nav">' 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->current == true}
	    <li class="menuactive"><a class="menuactive"
        {else}
	<li><a
        {/if}
        {if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}/" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><dfn>{$node->hierarchy}: </dfn><span>{$node->menutext}</span></a>
{/if}
{/foreach}
	{repeat string="</li></ul>" times=$node->depth-1}</li>
	</ul>
<div class="clearb"></div>
{/if}

Css:

Code: Select all

/*** NAVIGATION ***/
#menuwrapper{
	width: auto;
	height: 35px;
	margin: 0px 0px 0px 0px;
}
#menuwrapper ul#primary-nav{
	height: 1%;
	float: left;
	list-style: none;
	padding: 0;
	margin: 0;
        position: relative; /* pour le sous menu */
}
#menuwrapper ul#primary-nav li{
	float: left;
      	list-style: none;   /* pour le sous menu */
}
#menuwrapper ul#primary-nav li a,
#menuwrapper ul#primary-nav li a span{
	display: block;
        margin: 0 4px;
	padding: 0 21px;
	background-repeat: no-repeat;
	background: url(uploads/SpeedInfo/menu_speedinfo.png);
}
#menuwrapper ul#primary-nav li a {
	padding-left: 0;
	color: #FFF;
	font-weight: normal;
	line-height: 2.15em;
	text-decoration: none;
	margin-left: 1px;
	font-size: 0.85em;
}
#menuwrapper ul#primary-nav li a:hover,
#menuwrapper ul#primary-nav li a:active;
#menuwrapper ul#primary-nav li a.menuactive,
#menuwrapper ul#primary-nav li a:hover span {
	color: #FFF;
}
#menuwrapper ul#primary-nav li a span {
	padding-top: 6px;
	padding-right: 0;
	padding-bottom: 1px;
}
#menuwrapper ul#primary-nav li a.menuactive,
#menuwrapper ul#primary-nav li a:hover,
#menuwrapper ul#primary-nav li a:focus,
#menuwrapper ul#primary-nav li a:active {
	background-position: 100% -84px;
}
#menuwrapper ul#primary-nav li a {
	background-position: 100% -56px;
}
#menuwrapper ul#primary-nav li a.menuactive span,
#menuwrapper ul#primary-nav li a:hover span,
#menuwrapper ul#primary-nav li a:focus span,
#menuwrapper ul#primary-nav li a:active span {
	background-position: 0 -28px;
}
#menuwrapper ul#primary-nav li a span {
	background-position: 0 0;
}
/* ## SOUS MENU ## */
#menuwrapper ul#primary-nav li ul {
	position: absolute;
	top: 36px;
	left: 0px;
	width: 800px;
        background: red;
}
#menuwrapper ul#primary-nav li ul li a{
	display: none;
	float: left;
	font-weight: normal;
	color: #d1d7c6;
	text-decoration: none;
	background: none;
	z-index:10;
}
#menuwrapper ul#primary-nav li ul li a span{
    background: none;
}
#menuwrapper ul#primary-nav li:hover ul li a,
#menuwrapper ul#primary-nav li.menuactive:hover ul li a{
	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,
#menuwrapper ul#primary-nav li ul li.menuactive a{
	color: #fff;
}
/* ## FIN SOUS MENU ## */

Une idée sur ce que j'ai pu oublier ?

Aussi, lorsque je n'ai pas de sous menu, il ne doit pas y avoir l'affichage de la barre du sous menu.
Cela se coderait peut-être mieux via le code du menu ?
Peut-être avec une condition en plus qui dit que si l'élément actif a une sous liste, alors il faut l'afficher ?

je sais, ca en fait des questions 

[Jean le Chauve]

Difficile de dire sans un lien pour vérifier avec firebug.
Dans mon menu, lorsqu'il n'y a pas de sous menu, la barre s'affiche quand même, mais vide : http://www.brightfuture.be/fra/contact/

[Xarkam]

Oui, j'ai vu sur ton site.

Demain dans la journée, met toi sur http://*******/~xarkam/cms
Tu pourra voir le site en cour de dev.

[Jean le Chauve]

Je ne vais pas m'amuser à faire ton menu. Voici un lien où tu pourras trouver ton bonheur : http://www.cssplay.co.uk/menus/doors_drop_line.html et la dizaines de pages suivantes (next) te donnent toutes les variations de ce type de menu. Y compris pour le non-affichage de la barre de sous-menu.

[Xarkam]

Merci pour le lien.
En fait j'avais pas fait gaffe que j'avais déjà la class pour réaliser l'affichage horizontale.

Je doit regarder de plus prêt car lorsque je clique dans un lien du sous menu, celui-ci disparait et je perd toute sélection d'item dans le menu parent.