Menu coloré

[thewhitewolf]

Bonjour à toutes et à tous,

Mon soucis est le suivant, j'utilise actuellement CMSMS (Teremba Bay) pour la réalisation d'un site (what else ?) le problème étant que j'aimerais un menu ou chaque "liens" aurait une couleurs, du style de celui-ci (mais en horizontale, ça je sais faire ). Gros problème étant donner qu'il faudrait que je donne à chaque élément du menu, un (enfin c'est comme ça que je voie la chose) mais que ce joli menu sort tout droit d'un petit code écris et intégré automatiquement avec du Smarty (si je ne me trompe pas  ).

Voila la terreur de mes nuits Si vous trouvez le temps de me répondre, je vous en serais grandement reconnaissant.

[athena_pallas]

Les menus doivent-ils avoir n'importe quelle couleur pourvu qu'elle soit différente ?

Bonne soirée.

[thewhitewolf]

Avant tout merci pour ta réponse,

mes menus doivent en effet avoir des couleurs définies, j'ai 5 catégories, dont les couleurs (souhaitées) sont les suivantes :

#fff pour la première
#eed740 pour la seconde
#40a9fb pour la troisième
#c3916e pour la quatrième et
#75fd56 pour la dernière

Je vous joins une pré-maquette avec le menu pour que ça parle peux être plus ?

Bonne journée à vous.

[zorrax]

pour ma part je ferais les choses comme ca:
chaque page (menu) a un gabarit diffèrent
dans le gabarit tu spécifies un fichier css diffèrent avec une class différente pour chaque couleur

voila

[zorrax]

autre chose tu peux meme créer un fichier cssmenu.tpl different pour chaque gabarit

Code: Select all

{* Start Navigation *}
      <div id="menu_vert">
{* stylesheet  "Navigation: CSSMenu - Horizontal" *}
        <h2 class="accessibility">Navigation</h2>
        {menu template='cssmenu.tpl'}
        <hr class="accessibility" />
      </div>

et donc une class ou id differente pour chaque menu

[thewhitewolf]

Oui, c'était ma solution de replie si il n'y avait pas possibilité "d'automatiser" les menues.

En tout cas merci à vous !

( Je laisse le post ouvert encore 2 ou 3 jours et je met résolu si pas de nouvelle réponses, merci en tout cas. )

[athena_pallas]

En utilisant "Extra Page Attribute 1:" dans les options de page ? On ne pourrait pas y mettre la couleur et la récupérer dans le template de menu ? 

[Jean le Chauve]

Voici le template menu : cssmenu_ulshadow.tpl (NCCleanBlue) auquel j'ai ajouté à chaque de la plus haute hiérarchie une classe menu1, menu2... (en plus des classes préexistantes : menuparent, menuactive).
J'ai utilisé pour cela {$node->hierarchy}.
Tu n'as plus qu'à mettre les propriétés couleur dans ta css :
.menu1 {color:#fff;}
.menu2 {color:#eed740;}
etc.

Code: Select all

{* 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><li class="separator once" style="list-style-type: none;"> </li></ul>' times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->depth==1 and $node->haschildren == false}<li class="menu{$node->hierarchy}"><a 
{elseif $node->parent == true or ($node->current == true and $node->haschildren == true)}
<li class="menuactive menuparent menu{$node->hierarchy}">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="menuparent menu{$node->hierarchy}">
<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><li class="separator once" style="list-style-type: none;"> </li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

[thewhitewolf]

Je te remercie beaucoup Jean le chauve ! Et tous les autres qui ont pris le temps de lire ma demande c'est déjà beaucoup ! Je testerais dès demain.

Merci beaucoup en tout cas !

[thewhitewolf]

Petit soucis, j'ai peux être mal compris l'emplacement du code aussi J'ai crée un nouveau fichier de gabarit de menu nommé Cssmenu_ulshadow2 (plus de .tpl car ce n'est pas un menu d'origine il me semble) et j'y ai inséré le code de Jean le Chauve.
J'ai donc bien évidement changé dans le gabarit de ma page la direction du Template menu :

Code: Select all

<h2 class="accessibility">Navigation</h2>
        {menu template='cssmenu_ulshadow2'}
        <hr class="accessibility" />

Jusque là je ne pense pas mettre trompé. Ensuite j'ai mis les couleurs dans mon css de menu sous la forme :

Code: Select all

.menu1 {color:#fff;}
.menu2 {color:#eed740;}

Mais il me semble que c'est là que j'ai fait une erreur Il me faut ré-écrire mon css de menu, non ? Car là j'ai juste collé ça comme un barbare et d'après ce que je me souviens de mes cours de css ^^

Merci en tout cas !

Ps : je tiens à préciser que le code fonctionne parfaitement :

Code: Select all

<ul id="primary-nav"> 
 
<li class="menu1"><a href="#"><span>Accueil</span></a> </li> 
 
<li class="menuparent menu2"> 
<a class="menuparent" href="#"><span>Le service</span></a> 
<ul class="unli">
<li> <a href="#"><span>Les tarifs</span></a> </li>  
<li> <a href="#"><span>Les horaires</span></a> </li>  
<li> <a href="http://saje.mairie-saintgermain.fr/index.php?page=agents"><span>Agents</span></a> </li> 
 <li> <a href="#"><span>Inscriptions</span></a> </li>
<li class="separator once" style="list-style-type: none;"> </li></ul> 
</li> 
 
<li class="menuparent menu3"> 
<a class="menuparent" href="#"><span>Les accueils</span></a> 
<ul class="unli">  
<li> <a href="#"><span>Periscolaire</span></a> </li> 
<li> <a href="#"><span>Mercredi</span></a> </li> 
<li> <a href="#"><span>Vacances</span></a> </li>
<li class="separator once" style="list-style-type: none;"> </li></ul></li> 

<li class="menu4"><a href="#"><span>Le Club Ados</span></a> </li> 

<li class="menu5"><a href="#"><span>Galerie</span></a> </li> 
</ul> 
<div class="clearb"></div> 
</div> 

[Jean le Chauve]

Quel est ton problème ?

[athena_pallas]

Est-ce que les instructions hierarchy}"> donnent bien le résultat attendu ? 
En l'occurrence , , ... ?

[Jean le Chauve]

Ps : je tiens à préciser que le code fonctionne parfaitement :

Code: Select all

<ul id="primary-nav"> 
 
<li class="menu1"><a href="#"><span>Accueil</span></a> </li> 
 
<li class="menuparent menu2"> 
<a class="menuparent" href="#"><span>Le service</span></a> 
<ul class="unli">
<li> <a href="#"><span>Les tarifs</span></a> </li>  
<li> <a href="#"><span>Les horaires</span></a> </li>  
<li> <a href="http://saje.mairie-saintgermain.fr/index.php?page=agents"><span>Agents</span></a> </li> 
 <li> <a href="#"><span>Inscriptions</span></a> </li>
<li class="separator once" style="list-style-type: none;"> </li></ul> 
</li> 
 
<li class="menuparent menu3"> 
<a class="menuparent" href="#"><span>Les accueils</span></a> 
<ul class="unli">  
<li> <a href="#"><span>Periscolaire</span></a> </li> 
<li> <a href="#"><span>Mercredi</span></a> </li> 
<li> <a href="#"><span>Vacances</span></a> </li>
<li class="separator once" style="list-style-type: none;"> </li></ul></li> 

<li class="menu4"><a href="#"><span>Le Club Ados</span></a> </li> 

<li class="menu5"><a href="#"><span>Galerie</span></a> </li> 
</ul> 
<div class="clearb"></div> 
</div> 

[athena_pallas]

Jean, je n'en ai pas douté une fraction de seconde  ! Je n'avais pas fait attention à la fin du message posté par thewhitewolf et j'ai répondu trop vite.
Autant pour moi.

(en attendant, on ne sait toujours pas quel est son problème)

[thewhitewolf]

Bonsoir, ou bonjour

Désolé pour cette absence ... Mon soucis c'est que j'ai jamais aimé les menus déroulant (quel choc pour vous d'apprendre ça je suppose ) mais j'arrive jamais à bien écrire le css pour me colorier les menus du coup.

Je pensait à un truc du style :

Code: Select all

#menu li.menu1 {color:fff;}

Menu étant la div ou se trouve mon menu bien entendu.