Se connecter

22/07/2010, 14:55:42

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.7
#~ Nom de l'hébergeur : OHV DEDIE PLESK
#~ Informations Système :
#~ ~ ----------------------------------------------
#~ #~ Cms Version: 1.6.7
#~ #~ Installed Modules:
#~ #~ CMSMailer: 1.73.14
#~ #~ FileManager: 1.0.1
#~ #~ MenuManager: 1.6.2
#~ #~ ModuleManager: 1.3.1
#~ #~ News: 2.10.3
#~ #~ nuSOAP: 1.0.1
#~ #~ Printing: 1.0.3
#~ #~ Search: 1.6.1
#~ #~ ThemeManager: 1.1.1
#~ #~ TinyMCE: 2.7.0
#~ #~ Captcha: 0.4.1
#~ #~ CGExtensions: 1.19
#~ #~ Gallery: 1.3
#~ #~ Twitter: 0.0.7
#~ #~ AjaxMadeSimple: 0.1.6
#~ #~ Polls: 0.2.0
#~ #~ SiteMapMadeSimple: 1.2.1
#~ #~ FrontEndUsers: 1.9.3
#~ #~ Config Information:
#~ #~ php_memory_limit:
#~ #~ process_whole_template: false
#~ #~ max_upload_size: 20000000
#~ #~ default_upload_permission: 664
#~ #~ assume_mod_rewrite: true
#~ #~ page_extension: .htm
#~ #~ internal_pretty_urls: false
#~ #~ use_hierarchy: true
#~ #~ Php Information:
#~ #~ phpversion: 5.1.6
#~ #~ md5_function: On (Vrai)
#~ #~ gd_version: 2
#~ #~ tempnam_function: On (Vrai)
#~ #~ magic_quotes_runtime: Off (Faux)
#~ #~ memory_limit: 32M
#~ #~ max_execution_time: 300
#~ #~ safe_mode: Off (Faux)
#~ #~ session_save_path: /var/lib/php/session (0770)
#~ #~ session_use_cookies: On (Vrai)
#~ #~ Server Information:
#~ #~ Server Api: cgi-fcgi
#~ #~ Server Db Type: MySQL (mysql)
#~ #~ Server Db Version: 5.0.45
#~ #~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

Bonjour à tous,

J'ouvre un topic dans la continuité de celui ci : http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2736
Je pensais que mon problème était résolu, mais en ajoutant plusieurs sous menus plus rien n'allait ^^.

J'ai donc modifié un peu le code pour obtenir ceci :

Code :
{if $count > 0}

{foreach from=$nodelist item=node}

{if $node->depth > $node->prevdepth}

{repeat string="</li>" times=$node->depth-$node->prevdepth}

{elseif $node->depth < $node->prevdepth}

{repeat string="</li>" times=$node->prevdepth-$node->depth}

{/if}

{if $node->type == 'sectionheader' and $node->depth == 1}

<li><a href="#">{$node->menutext}</a>

<div class="sub">

{elseif $node->type == 'sectionheader' and $node->depth != 1}

<ul><li><h2><a href="#">{$node->menutext}</a></h2></li>

{else}

<li><a href="{$node->url}">{$node->menutext}</a>

{/if}

{/foreach}

{repeat string="</div>" times=$node->depth-1}

{/if}

Le résultat souhaité approcherait de cela : http://www.sohtanaka.com/web-design/mega...ss-jquery/ (je sais, j'aurais du coder main Confused

)

De mon coté un seule différence, ma div ".sub" a une taille et une position bien définie. Cela ressemble à ce que l'on peut voir sur cdiscount, le site de l'OL, le site du PSG par exemple.

Pour ce qui est du code, en version statique le code ressemble à ceci :

Code :
<ul id="topnav"> 

/* BOUCLE */

        <li> 

            <a href="#">Entête lv 1</a> /*présent dans ma barre de menu */

            <div class="sub"> 

                <ul> 

                    <li><h2><a href="#">Entête lv 1.1</a></h2></li> /*une colone dans ma div .sub */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.1 */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.2 */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.3 */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.4 */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.5 */

                    <li><a href="#">Navigation Link</a></li> /* lien 1.1.6 */

                    <li><a href="#">Navigation Link</a></li> /* etc. etc.*/

                </ul> 

                <ul> 

                    <li><h2><a href="#">Entête 1.2</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> /* lien 1.2.1 */

                    <li><a href="#">Navigation Link</a></li> /* etc */

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">Entête 1.3</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li>  /*lien 1.3.1*/

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

            </div> 

        </li> 

        <li> 

/* Les autre blocs ne sont qu'une répétition du code au dessus, seul les variables changent */

            <a href="#" >Entête 2</a> 

            <div class="sub"> 

                <ul> 

                    <li><h2><a href="#">2.1</a></h2></li> 

                    <li><a href="#">2.1.1</a></li> 

                    <li><a href="#">2.1.2</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">iPad</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">iPhone</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul>  

            </div> 

        </li> 

        <li> 

            <a href="#">Saison</a>

                        <div class="sub"> 

                <ul> 

                    <li><h2><a href="#">Desktop</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">Laptop</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">Accessories</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

            </div>  

        </li> 

        <li> 

            <a href="#" >Evènements</a> 

                        <div class="sub"> 

                <ul> 

                    <li><h2><a href="#">Desktop</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">Laptop</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

                <ul> 

                    <li><h2><a href="#">Accessories</a></h2></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                    <li><a href="#">Navigation Link</a></li> 

                </ul> 

            </div> 

        </li> 

    </ul>

Je viens vous demande un petit coup de main, même en ayant passé quelques heures la dessus, je n'arrive pas à résoudre mon problème Confused

.

En vous remerciant par avance Smile

Passez une bonne aprem'

Jean le Chauve · 22/07/2010, 15:10:26

FlorentCMSMS a écrit :Pour ce qui est du cote, en version statique le code ressemble à ceci.

Donne le code statique exact (avec le current et tous les enfants du current ouverts).
Sinon, je vais aussi y passer des heures Wink

.

22/07/2010, 15:24:00

Voilà j'ai modifié, dis moi si tu veux d'autre éléments.

Pour schématiser : je survole mon entête de section LV 1, la div .sub apparait, à l'interieur, plusieurs colones. Les h2 (entête lv 1.1) sont les titres de colones, et les li a sont les liens ( 1.1.1 )

L'"ul" topnav est à sortir de la boucle.

Jean le Chauve · 22/07/2010, 15:43:43

Il n'y a que 2 niveaux ? Et il me semble tellement simpliste par rapport aux sites que tu nous a mis en référence.
Est-ce que c'est celui-ci http://www.sohtanaka.com/web-design/mega...ss-jquery/ ?
ou 1 comme le psg ?
Parce qu'il y a une sacrée différence.
Fais-moi plaisir, va sur ce site, parcours tous les menus et dis-moi lequel tu veux et je te le ferai :
http://www.cssplay.co.uk/menus/index.html

22/07/2010, 15:51:57

Il y a trois niveau :

-> Entête LV 1 qui apparait dans ma barre de menu
-> Entête lv 1.1 qui apparait dans ma div, qui correspond au titre de ma colone
-> Lien lv 1.1.1

Exemple : [Image: subnav_1.jpg]

Je regarde sur le site que tu m'a proposé si quelque chose approche de ce que je recherche ^

22/07/2010, 15:59:01

http://www.cssplay.co.uk/menus/drop_lists.html -> Dans cet esprit, mais visuellement approchant de PSG.Fr ou de OLWEB.fr

***jce76350*** · 22/07/2010, 16:07:53

re,

>#~ Cms Version: 1.6.7
Il semble que cela ne soit pas une version actuelle
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=2770
Une correction de sécurité de la version 1.6.7

22/07/2010, 16:15:53

Merci, je m'en occupe ^

Jean le Chauve · 22/07/2010, 16:47:15

Je peux te faire celui du lien (et de la photo) http://www.sohtanaka.com/web-design/mega...ss-jquery/
Tu verras d'ailleurs que j'ai bien fait de me méfier, il faut une classe personnalisée à chaque lien de niveau 1 et il n'y a que deuxniveaux, pas trois. Les entêtes de niveau 1.1 sont de même niveau que les liens qui se trouvent en dessous.
Attention, ce menu est entièrement différent de celui du psg ou de olweb.

Et celui-ci ne te conviendrait pas : http://www.cssplay.co.uk/menus/drop-table.html ?

22/07/2010, 16:56:03

En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p

Jean le Chauve · 22/07/2010, 18:19:44

FlorentCMSMS a écrit :En réalité les classes personnalisées pour le premier niveau sont useless, dans ma version statique je les ai enlevés et ça fonctionne toujours.

En réalité j'ai modifié et le CSS et un peu le jQuery du menu pour qu'il ressemble à celui du psg.

Je veux bien que tu me file un coup de main ^^pour ce menu, et pourquoi pas tester avec celui de cssplay.co.uk en bonus :p

C'est donc que tu l'as testé en statique !
Tu peux me donner un lien pour le voir en action ?
Celui du cssplay, c'est un gros boulot, si l'autre fonctionne, je préfère m'abstenir...

22/07/2010, 21:20:14

Voilà ce que ça donne en version online, ultra simplifiée :

http://iflows.byethost10.com/

Jean le Chauve · 22/07/2010, 23:59:53

Je prends le code source de cette page là ?
Je te ferai ça demain, ça devrait aller vite.

Jean le Chauve · 23/07/2010, 08:55:30

J'ai besoin de savoir si ce que tu appelles entête de niveau 1 ou 2 sont des contenus ou des entêtes de section (type de contenu dans l'admin création de page)
Ex : dans les liens de ton menu : Products et Desktop
Si je clique sur Products, est-ce que je tombe sur une page avec un contenu ?
Idem pour Desktop.

23/07/2010, 09:06:43

Hello, donc :

( Hierarchie : 1)Products : entête de section
(1.1)Desktop / (1.2) Laptop / (1.3) Accessories : Entête de section

Jean le Chauve · 23/07/2010, 09:17:15

Zut, ça va être plus complexe.
Bah, plus de satisfactions quand ça marchera Wink

Jean le Chauve · 23/07/2010, 09:21:33

On se comprend bien ? Aucun de tes level 1 ne sont des contenus. Ils sont tous des entêtes de section et n'ont aucun contenu, mais ont tous des enfants et petit-enfants.

23/07/2010, 09:54:20

Voilà ^^. En gros le lv 1 sont les menus parents présents dans ma barre de navigation, les <h2> sont aussi des entêtes de section, mais enfants du lvl 1, et mes liens par colones, sont respectivement enfants de ces <h2>

Jean le Chauve · 23/07/2010, 10:04:22

ok.

Jean le Chauve · 23/07/2010, 14:32:20

Et voilà :

Code :
{if $count > 0}

<div id="nav_list"> 

<ul id="topnav">

{foreach from=$nodelist item=node}

{if (($node->depth < $node->prevdepth) && ($node->depth > 1)) }

{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}

{elseif $node->depth < $node->prevdepth && $node->depth == 1 }

</li></ul>

{elseif $node->index > 0 && $node->type != 'sectionheader' }</li>

{/if}

{if $node->type == 'sectionheader' && $node->depth == 1 && $node->index == 0}

<li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">

{elseif $node->type == 'sectionheader' && $node->depth == 1}

</div></li><li class="sectionheader1"> <a href="{$node->url}"> {$node->menutext} </a><div class="sub">

{elseif $node->type == 'sectionheader' && $node->depth == 2}

<ul><li class="sectionheader2"><h2><a href="{$node->url}"> {$node->menutext} </a></h2>

{else}

<li><a href="{$node->url}"> {$node->menutext}</a>

{/if}

{if $node->index == $count-1}</li></ul>{/if}

{/foreach}

</div></li></ul></div>

{/if}

Ce n'est pas optimisé, mais ça marche.
La plus grosse difficulté provenait du fait que tu ne veux pas ouvrir d'<ul> pour tes liens du niveaux 3.

23/07/2010, 15:28:38

Une nouvelle fois un Grand MERCI ! ^^Ca fonctionne presque parfaitement ( seul mon menu "Accueil" ne fonctionne pas ^^, mais je le ferais en dur ). Je passe un coup de CSS la dessus et ça sera parfait Smile

.

( Promis je vous montrerais le site final Smile

)

Merci.

Jean le Chauve · 23/07/2010, 15:43:22

Bin oui, tu m'as affirmé que tous les niveaux 1 étaient des entêtes de section et avaient tous des enfants.

23/07/2010, 16:35:54

C'est le cas pour tous, hormis l'accueil, mais ton code me convient très bien ^^. Je passe en résolu.

Encore merci Jean Smile

Se connecter
Utilisateur :
Mot de passe :	Mot de passe oublié ?
	Se rappeler