[RESOLU] Créer menu DropDown*

FlorentCMSMS · 22/07/2010 14:55:42

#~~~~~ 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 :

{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/meg … ss-jquery/ (je sais, j'aurais du coder main :s )

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 :

            <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 :s.

En vous remerciant par avance

Passez une bonne aprem'

Dernière modification par FlorentCMSMS (23/07/2010 16:36:21)

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 .

FlorentCMSMS · 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/meg … 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

FlorentCMSMS · 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 :

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

FlorentCMSMS · 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

FlorentCMSMS · 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/meg … 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 ?

FlorentCMSMS · 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

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

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...

FlorentCMSMS · 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.

FlorentCMSMS · 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

Dernière modification par Jean le Chauve (23/07/2010 09:17:35)

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.

FlorentCMSMS · 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>

Dernière modification par FlorentCMSMS (23/07/2010 09:54:55)

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

ok.

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

Et voilà :

{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.

Dernière modification par Jean le Chauve (23/07/2010 14:35:30)

FlorentCMSMS · 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 .

( Promis je vous montrerais le site final )

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.

FlorentCMSMS · 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

Informations Générales

Informations Système

Une fois votre problème solutionné

CMS Made Simple France

Annonce

#1 22/07/2010 14:55:42

[RESOLU] Créer menu DropDown*

#2 22/07/2010 15:10:26

Re : [RESOLU] Créer menu DropDown*

#3 22/07/2010 15:24:00

Re : [RESOLU] Créer menu DropDown*

#4 22/07/2010 15:43:43

Re : [RESOLU] Créer menu DropDown*

#5 22/07/2010 15:51:57

Re : [RESOLU] Créer menu DropDown*

#6 22/07/2010 15:59:01

Re : [RESOLU] Créer menu DropDown*

#7 22/07/2010 16:07:53

Re : [RESOLU] Créer menu DropDown*

#8 22/07/2010 16:15:53

Re : [RESOLU] Créer menu DropDown*

#9 22/07/2010 16:47:15

Re : [RESOLU] Créer menu DropDown*

#10 22/07/2010 16:56:03

Re : [RESOLU] Créer menu DropDown*

#11 22/07/2010 18:19:44

Re : [RESOLU] Créer menu DropDown*

#12 22/07/2010 21:20:14

Re : [RESOLU] Créer menu DropDown*

#13 22/07/2010 23:59:53

Re : [RESOLU] Créer menu DropDown*

#14 23/07/2010 08:55:30

Re : [RESOLU] Créer menu DropDown*

#15 23/07/2010 09:06:43

Re : [RESOLU] Créer menu DropDown*

#16 23/07/2010 09:17:15

Re : [RESOLU] Créer menu DropDown*

#17 23/07/2010 09:21:33

Re : [RESOLU] Créer menu DropDown*

#18 23/07/2010 09:54:20

Re : [RESOLU] Créer menu DropDown*

#19 23/07/2010 10:04:22

Re : [RESOLU] Créer menu DropDown*

#20 23/07/2010 14:32:20

Re : [RESOLU] Créer menu DropDown*

#21 23/07/2010 15:28:38

Re : [RESOLU] Créer menu DropDown*

#22 23/07/2010 15:43:22

Re : [RESOLU] Créer menu DropDown*

#23 23/07/2010 16:35:54

Re : [RESOLU] Créer menu DropDown*

Pied de page des forums

Fin définitive du support 1.6.x sur le forum français