[RESOLU] Créer menu DropDown* - Version imprimable

[RESOLU] Créer menu DropDown* - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [RESOLU] Créer menu DropDown* (/thread-559.html)

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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-drop-downs-w-css-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'

[RESOLU] Créer menu DropDown* - Jean le Chauve - 22/07/2010

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

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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.

[RESOLU] Créer menu DropDown* - Jean le Chauve - 22/07/2010

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-drop-downs-w-css-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

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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 ^

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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

[RESOLU] Créer menu DropDown* - jce76350 - 22/07/2010

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

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

Merci, je m'en occupe ^

[RESOLU] Créer menu DropDown* - Jean le Chauve - 22/07/2010

Je peux te faire celui du lien (et de la photo) http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-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 ?

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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

[RESOLU] Créer menu DropDown* - Jean le Chauve - 22/07/2010

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

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 22/07/2010

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

http://iflows.byethost10.com/

[RESOLU] Créer menu DropDown* - Jean le Chauve - 22/07/2010

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

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

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.

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 23/07/2010

Hello, donc :

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

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

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

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

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.

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 23/07/2010

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>

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

ok.

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

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.

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 23/07/2010

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.

[RESOLU] Créer menu DropDown* - Jean le Chauve - 23/07/2010

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

[RESOLU] Créer menu DropDown* - FlorentCMSMS - 23/07/2010

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