Discussion :

[sylvaindu59]

Bonjour à tous.
Je sollicite vos connaissances en la matiére.

Voilà, j'ai une boutique en ligne www.aquasyl.fr/q4
Dont les sous catégories de mes produits s'allongent de plus en plus.

Je cherche à obtenir mon menu de gauche en menu déroulant verticale sur la gauche.
Voici ce que je cherche à obtenir :
www.cssplay.co.uk/menus/flyoutt.html
J'ai contacté la personne de ce site, mais le mail semble ne plus fonctionner.

Je cherche en vain depuis longtemps sans pouvoir y arriver.

Je vous donne ici le css de ce menu ( menu 1 )
( en éspérant reussir à respecter votre charte pour l'affichage des codes)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* MENU 1 styles - left menu */
#menu1{width:150px;margin:1px 0 1px 1px;}
#menu1 dt{border-bottom:1px solid #000099;}
#menu1 dt a{display:block;height:12px;padding:1px 0 1px 1px;color:white;font: 1.170em verdana, sans-serif;}
#menu1 dt a:hover{color:#FF33FF;}
#menu1 dd{margin:0 0 0 1px;border-bottom:1px solid red;}
#menu1 dd a{display:block;height:15px;padding:2px 0 1px 2px;color:#FFFF00;font:1.167em verdana, sans-serif;}
#menu1 dd a:hover{color:red;}
#menu1 dt.l1{border-top:px solid red;}

Le fichier menu1.tpl :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- BEGIN LIST_HEAD -->
<dl id="menu1"><!-- END LIST_HEAD -->
<!-- BEGIN LIST_LIST -->
<dt class="l$aList[sStyle]" $aList[sSelected]><a href="?p=p_$aList[iCategory]&amp;sName=$aList[sNameUrl]">$aList[sName]</a></dt>
<!-- END LIST_LIST -->
<!-- BEGIN SUB -->
  <dd class="l$aList[sStyle]" $aList[sSelected]><a href="?p=p_$aList[iCategory]&amp;sName=$aList[sNameUrl]">$aList[sName]</a></dd>
<!-- END SUB -->
<!-- BEGIN LIST_FOOT -->
</dl>
<!-- END LIST_FOOT -->
<!-- BEGIN SELECTED --><!-- END SELECTED -->
<!-- BEGIN PHOTO --><!-- END PHOTO -->
<!-- BEGIN NOT_FOUND -->
<dl id="menu2">&nbsp;</dl>
<!-- END NOT_FOUND -->
<!-- BEGIN NO_PHOTO --><!-- END NO_PHOTO -->

Je vous remercie pour votre aide, si vous avez besoin d'autres fichiers faites moi signe.
Merci beaucoup d'avance.
Sylvain

[Kerod]

Peux-tu donner le code HTML généré ? Ce sera beaucoup plus simple pour te donner une solution.

[sylvaindu59]

Bonjour Kerod,
Que veux tu me dire exactement ?
La page que cela affiche ?

[Kerod]

Exactement.

Pour en savoir plus sur ce forum : http://www.developpez.net/forums/a17...isation-forum/

[sylvaindu59]

J'éspére ne pas te répondre à coté de la plaque.

Ce code donne le menu de Gauche ( celui avec toutes mes catégories de produits )

Sur mon site :
www.aquasyl.fr/q4

As tu besoin d'un autre fichier ?

Dans un des mes fichiers, nommé /templates/page.tpl, j'ai ceci :
$sMenu1
Qui affiche mon menu.

[Kerod]

Tu sais que le menu de CSS Play est fait avec des ul li et non des dl dt dd ?
Serais-tu prêt à changer ton architecture ?

[sylvaindu59]

Là c'est un peu trop technique pour moi.
Si il faut changer quelque chose pour avoir ce type de menu, sans que cela ne joue sur autre chose.
Oui pas de soucis.

Je pensais qu'il fallait juste travailler sur le css de ce menu seulement.

Peut être y à t'il moyen que les sous produits se décalle à droite, mais sans que cela ne me fasse descendre les catégories parente.
J'ai fait un petit montage sous paint :

[sylvaindu59]

Re bonjour,
J'ai une piste.

La personne qui fait partie de l'équipe qui ont crée cette boutique m'a répondue aujourd'hui.
Elle m'indique que cette version ne peux être modifiée pour cela , il faut revoir le fichier templates de ce menu, et, je suppose son css.

Voici ces mots, cela reprend ce que vous m'indiquiez, et en plus me donne une solution, car sur la nouvelle version de cette boutique, on peux faire ce type de menu, il suffit donc, d'aprés lui, qui j'adapte le code de la derniére version, à la mienne :

"
It's very hard to do in this version of script because it use <dd> and <dt> lists for menu (not like in new version <ul>). If You want to do this modification You will have to change template of this menu.. You can download free version of Quick.Cart 3.1 and find out how We menage it in our new version.. When You change the template of this menu You can use simple floats to set blocks in way that You want..
"
Je viens de télécharger la derniére version pour voir les fichiers qui m'intérresse.

Je ne pense pas qu'il suffit de simplement changer les codes, il va falloir que je bidoulle.
Déjà, le nom du menu à changé, il passe du menu1 au menu3, jusque la rien de complique.

Par contre à la phrase :
"
When You change the template of this menu You can use simple floats to set blocks in way that You want"

Je comprend bien, mais comment faire du simple float ou je veux qu'il se place ?


Merci

[sylvaindu59]

Bon, j'ai posé la question tout de même, le menu1 de ma version, s'appele bien menu3 désormais dans la nouvelle version.

J'ai donc aussi demandé si il suffisait juste de modifier ma page menu1.tpl par celle du menu de la nouvelle version, et il me répond avec un peu plus de complexcité pour moi :

Perfect,
> I just have to change the menu1.tpl of my version , like the new version .
> And the css code of it too?

"Not only.. You have to also look at core/pages.php and find how these blocks of menu are generating (search for names of blocks in template). Sometimes script using HEAD and FOOT of block sometimes not.."

Je dois donc regarder dans le fichier page.tpl de la nouvelle version , pour trouver comment les"block of menu " ( j'en traduit rien ) se générent.


Je pense que ensemble nous arriverons à mettre en place cela sur ma version, et de ce faite obtenir l'effet de menu déroulant sur la droite que je souchaite.


Le css du menu de la nouvelle version :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
/* LEFT MENU */
#menu3 ul, #menu4 ul{margin:4px 0;padding:0 15px 2px;background:#f0efcd;list-style:none;}
#menu3 a, #menu4 a{display:block;display:inline-block;width:89%;padding:6px 6%;border-top:1px solid #d1bd9d;background:url('img/point.gif') no-repeat 0 11px;color:#553;text-decoration:none;}
#menu3 a:hover, #menu4 a:hover{background-color:inherit;color:#d01c02;text-decoration:underline;}
#menu3 .l1 a, #menu4 .l1 a{border-top:0;}
 
#menu3 .sub1, #menu4 .sub1{margin:0;padding:0 0 10px  0;border:0;}
#menu3 .sub1 a, #menu4 .sub1 a{display:block;width:75%;padding:2px 10% 2px 15%;border:0;background:url('img/point_sub.gif') no-repeat 15px 6px;}
#menu3 .sub2 a, #menu4 .sub2 a{padding-left:18%;}
#menu3 .sub3 a, #menu4 .sub3 a{padding-left:21%;}
* html #menu3 a, * html #menu4 a, * html #menu3 .sub1 a, * html #menu4 .sub1 a{width:100%;}
#menu3 .selected, #menu4 .selected{background-color:inherit;color:#d01c02;text-decoration:underline;}

Je dois donc, dans un premier temps l'adapter au css de mon menu ci dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/* MENU 1 styles - left menu */
#menu1{width:120px;margin:1px 0 1px 1px;}
#menu1 dt{border-bottom:1px solid #000099;}
#menu1 dt a{display:block;height:12px;padding:1px 0 1px 1px;color:white;font: 1.1em verdana, sans-serif;}
#menu1 dt a:hover{color:#FF33FF;}
#menu1 dd{margin:0 0 0 1px;border-bottom:1px solid red;}
#menu1 dd a{display:block;height:15px;padding:2px 0 1px 2px;color:#FFFF00;font:1em verdana, sans-serif;}
#menu1 dd a:hover{color:red;}
#menu1 dt.l1{border-top:px solid red;}

Ensuite modifier ma page menu1.tpl dont voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- BEGIN LIST_HEAD -->
<dl id="menu1"><!-- END LIST_HEAD -->
 
<!-- BEGIN LIST_LIST -->
<dt class="l$aList[sStyle]" $aList[sSelected]><a href="?p=p_$aList[iCategory]&amp;sName=$aList[sNameUrl]">$aList[sName]</a></dt>
<!-- END LIST_LIST -->
 
<!-- BEGIN SUB -->
  <dd class="l$aList[sStyle]" $aList[sSelected]><a href="?p=p_$aList[iCategory]&amp;sName=$aList[sNameUrl]">$aList[sName]</a></dd>
<!-- END SUB -->
 
<!-- BEGIN LIST_FOOT -->
</dl>
<!-- END LIST_FOOT -->
 
<!-- BEGIN SELECTED --><!-- END SELECTED -->
<!-- BEGIN PHOTO --><!-- END PHOTO -->
 
<!-- BEGIN NOT_FOUND -->
<dl id="menu2">&nbsp;</dl>
<!-- END NOT_FOUND -->
 
<!-- BEGIN NO_PHOTO --><!-- END NO_PHOTO -->

En me basant sur celui de la nouvelle version :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
!-- BEGIN LIST --><li class="l$aData[sStyle]"><a href="$aData[sLinkName]" $aData[sSelected]>$aData[sName]</a>$aData[sSubContent]</li><!-- END LIST -->
 
<!-- BEGIN HEAD --><div id="menu3"><div class="type">$aData[sMenuType]</div><ul><!-- END HEAD -->
<!-- BEGIN FOOT --></ul></div><!-- END FOOT -->
 
<!-- BEGIN HEAD_SUB --><ul class="sub$aData[iDepth]"><!-- END HEAD_SUB -->
<!-- BEGIN FOOT_SUB --></ul><!-- END FOOT_SUB -->
 
<!-- BEGIN SELECTED -->class="selected"<!-- END SELECTED -->

Pour la suite cela se complique, mais je pense qu'il faut d'abord voir ces deux codes ci d'abord non ?

Merci à vous