CMS Automne
http://www.automne-cms.org/forum/

[Résolu] Aide pour un menu multicolore
http://www.automne-cms.org/forum/viewtopic.php?f=2&t=959
Page 1 sur 1

Auteur:  jeey [ Mar Août 09, 2011 2:35 pm ]
Sujet du message:  [Résolu] Aide pour un menu multicolore

Bonjour à tous,

Je suis chargé de mettre en place un intranet sous Automne-CMS, projet hérité d'un de mes collègues qui a déniché cet outil qui présente vraiment bien et qui devrait satisfaire tout le monde ici !
Ceci dit, afin d'harmoniser l'intranet avec les différents sites dispo ici, la direction du service voudrait proposer un menu dont chaque rubrique aurait une couleur propre et dont cette couleur serait la nuance principale des pages de la rubrique. je me comprends parfaitement bien, mais est-ce que tout le monde suit encore ??? :
[*] Une rubrique "Présentation" dont le menu, les sous-menu et la couleur principale serait le vert
[*] Une rubrique "FAQ" dont le menu, les sous-menu et la couleur principale serait le marron etc...

Si pour les différentes couleur de pages, je pense m'orienter vers des modèles à la structure peu ou prou identique mais liées à des CSS différents (une autre solution plus propre dans la salle ??), pour le menu, je n'arrive à rien de concluant (en mode dynamique tout du moins).

Voici mes deux essais principaux, basé sur le tutoriel de Automne4you (en mode cargo cult, j'en conviens) :
Code :
** TEST 1**
            <atm-linx type="recursivelinks">
               <selection>
                  <start><nodespec type="relative" value="root" /></start>
                  <condition property="lvl" operator="&lt;=">
                        <value type="data">3</value>
                  </condition>
               </selection>
               <display mode="open" root="false">
                  <htmltemplate>
                        <li class="{{lvlClass}} {{typeClass}} Lien{{number}}"><a href="{{href}}" class="{{currentClass}} {{isParent}}">{{title}}</a>{{sublevel}}</li>
                  </htmltemplate>
                  <subleveltemplate>
                        <ul class="{{lvlClass}}">{{sublevel}}</ul>
                  </subleveltemplate>
               </display>
            </atm-linx>            

qui donne :
Pièce jointe:
Description du fichier : Test 1
test1.png
test1.png [ 9.97 Kio | Consulté 33936 fois ]


ou
Code :
** TEST 2 **
<atm-linx type="recursivelinks">
               <selection>
                  <start><nodespec type="relative" value="root" /></start>
                  <condition property="lvl" operator="&lt;=">
                        <value type="data">3</value>
                  </condition>
               </selection>
               <display mode="open" root="false">
                  <htmltemplate>
                        <li class="{{lvlClass}} {{typeClass}}"><a href="{{href}}" class="{{currentClass}} {{isParent}}">{{title}}</a>{{sublevel}}</li>
                  </htmltemplate>
                  <subleveltemplate>
                        <ul class="{{lvlClass}} Lien{{number}}">{{sublevel}}</ul>
                  </subleveltemplate>
               </display>
            </atm-linx>            

qui donne :
Pièce jointe:
Description du fichier : Test 2
test2.png
test2.png [ 9.51 Kio | Consulté 33936 fois ]


Des bons conseils quelqu'un ? (et en attendant vos avis, je retourne RTFM ! :p)

Merci à tous !

Auteur:  Cguillaume [ Mar Août 09, 2011 4:12 pm ]
Sujet du message:  Re: Aide pour un menu multi-colore

Automne ne permet pas aujourd'hui de personnaliser un menu comme tu le souhaites, si j'ai bien compris chaque onglet principal et ses sous-rubriques doivent avoir une couleur différente...
En CSS c'est pas gagné, voir pas possible (?!!), je te conseil un petit traitement javascript (Jquery est ton ami ^^) qui peut faire ça facilement...

Voilou :D

Auteur:  jeey [ Mar Août 09, 2011 4:18 pm ]
Sujet du message:  Re: Aide pour un menu multi-colore

Voici ce que j'aimerai obtenir :
Pièce jointe:
Description du fichier : le résultat escompté
resultat.png
resultat.png [ 9.97 Kio | Consulté 33933 fois ]

avec des sous-menu pour la deuxième rubrique qui seraient marron
(et une troisieme rubrique et ses sous-menu violets etc...) ...

Je serai presque rassuré de savoir que ce n'est pas possible; Je n'aurais pas à me cacher de honte sous le bureau :p !

Par contre, avec du Jquery, y'a-t-il une voie particulière à chercher ???

Merci en tout cas !

Auteur:  Cguillaume [ Mar Août 09, 2011 5:24 pm ]
Sujet du message:  Re: Aide pour un menu multi-colore

Ce code qui est une démo pour ton traitement javascript, il faut juste que tu récupères si tu ne l'a pas déjà jquery-1.6.1-min.js (ou une autre version d'ailleurs) et que tu modifies ligne 4 le chemin vers celui-ci...
C'est une façon parmi d'autres qui repose sur les niveaux de classe qui sont générés par Automne, le script effectue le traitement à partir de ces niveaux...

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.6.1-min.js" ></script>

<style>
/* quelques réglages css basiques pour l'exemple */
ul { amrgin:0 ; padding:0;}
ul li {list-style:none outside none;}
li.lvl1 { float:left;}
li.lvl1 a { display:block;border:solid 1px #000; width:100px; height:50px;}
ul.lvl2 { display:block; position:absolute; top:51px;}
ul.lvl2 a { display:block; width:100px; height:50px;}
li.lvl1 { position:relative;}
li.lvl2 { position:absolute;}

/* les classes pour personnaliser tes menus */
.couleur0 { background:#FF0000;}
.couleur1 { background:#00FF00;}
.couleur2 { background:#0000FF;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
      // recherches de tous les éléments li qui ont la classe lvl1
      $('li.lvl1').each(function(i){
         // ajout de la classe couleur0 au premier onglet, couleur 1 au second ...
         $(this).addClass('couleur'+[i]);
         // ajout de la classe couleur0 aux enfants li de l'onglet 1, ...
         $(this).children('ul').children('li').addClass('couleur'+[i]);
      });
   });
</script>
</head>
<body>
<ul id="menuMultiColor" class="lvl1">
  <li class="lvl1"><a class="menu">Menu 1</a>
   <ul class="lvl2">
     <li><a>sous-menu 1</a></li>
     <li><a>sous-menu 2</a></li>
   </ul>
  </li>
  <li class="lvl1"><a>Menu 2</a>
     <ul class="lvl2">
     <li><a>sous-menu 1</a></li>
     </ul>
  </li>
  <li class="lvl1"><a>Menu 3</a></li>
</ul>
</body>
</html>

Après tu peux traiter en CSS les hover sur les classes couleur0, couleur1 et ainsi de suite...
Bon c'est un truc fait rapidement, ça peut être amélioré par la suite...
J'espère que c'est ce dont tu avais besoin !

Auteur:  jeey [ Mer Août 10, 2011 8:47 am ]
Sujet du message:  Re: Aide pour un menu multi-colore

Bien vu !

Merci beaucoup, je m'en vais aller tester ça !

Auteur:  jeey [ Mer Août 10, 2011 9:19 am ]
Sujet du message:  [Résolu] Re: Aide pour un menu multi-colore

It's done ! Merci !
Pièce jointe:
yes!.png
yes!.png [ 4.08 Kio | Consulté 33917 fois ]

Page 1 sur 1 Le fuseau horaire est UTC [Heure d’été]
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/