[Jean le Chauve]

Utilise un des gabarit du menuManager (gestion de menus et importer le gabarit).
Je ne vais pas te recopier bêtement un gabarit qui existe dans le cms.
Tu auras une structure en liste à puces (ul li) et toutes les classes nécessaires (oublie les id, elles sont plus restrictives).
Si tu veux y comprendre quelque chose (et tu as les capacités nécessaires, il me semble que tu suis des cours d'ingénieur à l'ubtm), importe tous les gabarits et regarde les différences dans le code source généré).
La gestion de menu parait rebutante à première vue, mais n'est pas véritablement complexe.
Regarde cette page : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2680, j'ai donné le code pour insérer une classe supplémentaire.

Ici, tu me demandes un code, mais tu ne sais pas exactement ce qu'il doit générer.

Je me rappelle de ton site, il était très joli. Ta navigation était uniquement en images.
Est-ce que c'est cet ancien code que tu désires reproduire ?

Si oui, donne-le moi complet (activé sur une page enfant), et je te ferai le gabarit.

[SamLi]

Hello,

Je souhaite reproduire le même genre.
Si tu veux je te montre une maquette sous forme d'image peut-être cela t'aidera à comprendre ce que je veux.

Je me suis pas encore lancé dans l'intégration c'est pour ça, mais j'étais en phase de renseignements pour savoir si ce que je voulais était complètement faisable.

Quand j'aurai un peu de temps je te donnerai un exemple de code plus serieux
(Vu que les boutons sont générés automatiquement en fonction des contenus, de toute facon
un item de chaque suffit..)

Bon, voila la maquette du site : Image maquette

PS: Tu es bien renseigné sur moi
Tu as bonne mémoire

[SamLi]

Up?

[Jean le Chauve]

Je ne veux d'image, je veux du code détaillé et définitif.
Essaye les gabarits par défaut du gestionnaire de menus, ils devraient convenir.

[SamLi]

J'ai du mal à saisir ce que tu attends de moi : j'essaye

Code :

<div id="menu">
   <ul>
        <li class="parent" id="home"><a href="" title="">  </a></li>
        <li class="parent">  </li>
            <ul>
                 <li class="enfants">
                  ...
            </ul>
         <li class="parent"> </li>
         <li class="parent"> </li>      
   </ul>

</div>

Je n'ai pas gardé le

Code :

<li class="active parent">
           <ul></ul>

parce que si j'ai bien compris cette classe est prise en compte quand on a cliqué sur le lien parent.. Moi ca sera au hover donc c'est inutile parce qu'on pourra mettre un

Code :

.parent:hover{}

?

[Jean le Chauve]

Je vais partir de la supposition qu'on est sur la page "galerie" et pas "home" comme indiqué sur ta maquette.

1° Ta maquette ne correspond pas à ta demande initiale :

J'aimerais que lorsque je passe la souris sur un bouton pointant vers une page parente, les enfants glissent dessous en décalant le reste du menu vers le bas.

Les enfants de "biographie" et de "galerie" sont affichés (d'ailleurs avec le décalage, j'ai d'abord cru que galerie était enfant de contact).

2° Dans ta maquette, on voit bien que tu appliques un style à "galerie" quand elle est active. Ne me dis pas que quand on n'a pas le pointeur de la souris sur un lien, le menu est collapsé et sans style même si on est sur une page enfant...

Je n'ai pas gardé le
<li class="active parent">
<ul></ul>
parce que si j'ai bien compris cette classe est prise en compte quand on a cliqué sur le lien parent.. Moi ca sera au hover donc c'est inutile parce qu'on pourra mettre un
.parent:hover{}
?

Si on a cliqué sur le lien parent, on est sur sa page .
"active parent" est donc une classe donnée pour styliser un lien parent (ou ses enfants) lorsqu'on est sur la page de l'enfant actif (ce qui est dans ta demande sur la maquette). :hover n'a donc rien à y voir.

4° Il est impossible de donner l'effet que tu désires avec l'html que tu viens de donner et ta liste à puces est erronée :

Code :

<ul>
     <li class="parent" id="home"><a href="" title="">  </a></li>
     <li class="parent">  </li>
     <ul>...

Conclusion, et ce n'est pas une critique (à chacun ses compétences), mais quand tu me montreras que tu es capable de créer le code html statique et sa css pour avoir le menu que tu désires, je t'aiderai pour faire le gabarit dynamique

[SamLi]

Je vais partir de la supposition qu'on est sur la page "galerie" et pas "home" comme indiqué sur ta maquette.

1° Ta maquette ne correspond pas à ta demande initiale :

J'aimerais que lorsque je passe la souris sur un bouton pointant vers une page parente, les enfants glissent dessous en décalant le reste du menu vers le bas.

Les enfants de "biographie" et de "galerie" sont affichés (d'ailleurs avec le décalage, j'ai d'abord cru que galerie était enfant de contact).

Oui désolé j'ai représenté les enfants affichés pour voir l'arborescence de mes pages plus ou moins.
La demande est bien resté la même à savoir :

-Si le pointeur survole galeries
- Le bouton galerie à un petit mouvement d'indentation et changement de couleur
- les enfants se déroulent en accordéon
- les autres enfants d'autres parents sont cachés (Ex: CV est caché)

Méaculpa.

Sinon, pourquoi fais-tu la supposition qu'on se trouve sur galerie et non home?
Dans ma tête sur cette maquette, on se trouve sur home et on place le pointeur sur galerie, donc les enfants de galerie sortent

2° Dans ta maquette, on voit bien que tu appliques un style à "galerie" quand elle est active. Ne me dis pas que quand on n'a pas le pointeur de la souris sur un lien, le menu est collapsé et sans style même si on est sur une page enfant...
Si on a cliqué sur le lien parent, on est sur sa page .
"active parent" est donc une classe donnée pour styliser un lien parent (ou ses enfants) lorsqu'on est sur la page de l'enfant actif (ce qui est dans ta demande sur la maquette). :hover n'a donc rien à y voir.

Exact.. Méaculpa à nouveau

4° Il est impossible de donner l'effet que tu désires avec l'html que tu viens de donner et ta liste à puces est erronée :

Code :

<ul>
     <li class="parent" id="home"><a href="" title="">  </a></li>
     <li class="parent">  </li>
     <ul>...

Conclusion, et ce n'est pas une critique (à chacun ses compétences), mais quand tu me montreras que tu es capable de créer le code html statique et sa css pour avoir le menu que tu désires, je t'aiderai pour faire le gabarit dynamique

Donc si j'ai envie de ton aide pour dynamiser le menu, il faut que je te donne le menu fonctionnel non dynamique ?
Je vais essayer.. même si j'ai l'impression que beaucoup m'échappe pour l'instant.
J'ai bien le fonctionnement du menu en tête d'un point de vue visuel, mais son interprétation en html n'arrive pas à être correcte :/

[SamLi]

Bon,

J'ai fait un essai rapidement sur mon notepad++
Je pense être arrivé a quelquechose de fonctionnel à peu près..

Je sais pas si ce que j'ai fait est correct.. j'ai essayé d'obtenir ce que je
voulais avec les propriétés que je connais.
Si il y a une meilleure méthode/meilleures propriétés je veux bien

Code :

<ul id=menu>
    <li class="parent"><a>home</a>
        <ul>
            <li class="enfant"><a>CV</a></li>
        </ul>
    </li>
    <li class="parent"><a>biographie</a></li>
    <li class="parent"><a>contact</a></li>
    <li class="parent"><a>biographie</a></li>
    <li class="parent"><a>galerie</a>
        <ul>
            <li class="enfant"><a>Photograhie</a></li>
            <li class="enfant"><a>Sport</a></li>
        </ul>
    </li>
</ul>

CSS associé

Code :

#menu{}
#menu a{text-decoration:underline;}

.parent a:hover{text-indent:10px;}
.parent a:active{text-indent:10px;}

.parent{
display:block;
height:20px;
overflow:hidden;
}

.parent:hover{height:auto; text-indent:10px;}
.parent:active{height:auto;}
.parent ul{}

.enfant{}
.enfant a{}
.enfant a:hover{}
.enfant a:active{}

Le tout visible à cette page : http://whynotyou.fr/ftp2/testmenu/menu.html

EDIT: Question, est-ce que j'aurai des animations fluides en css avec ce type de code (agrandissement vertical de l'item parent - indentation du lien - changement couleur du lien) ?

[Jean le Chauve]

Donc tu peux utiliser n'importe quel gabarit du gestionnaire de menu, il te donnera cette structure et tu auras même des classes supplémentaires. Écris bêtement {menu} dans le gabarit à l'endroit où tu désires voir ton menu.

[SamLi]

Pourtant j'ai testé celui d'orgine, il me convient pas tout à fait : il faut cliquer pour déplier les enfants et au hover sur le parent, les enfants apparaissent dans un volet sur le coté ...

[Jean le Chauve]

M'enfin, tu adaptes la css ! :mad:

[SamLi]

Bon Ok, je vais y travailler.

Je taggue résolu. Un grand merci !