[RESOLU] Créer un menu Dropdown

[RESOLU] Créer un 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 un menu Dropdown (/thread-498.html)

[RESOLU] Créer un menu Dropdown - FlorentCMSMS - 30/06/2010

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.7
#~ Nom de l'hébergeur : OVH dédié
#~ 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 et à toutes,

Je viens demander un petit coup de main à la communauté. Je m'explique :

Je souhaiterais automatiser la création de mon menu, que j'ai codé en HTML avec une syntaxe bien particulière. Seulement, la création d'un template de menu me dépasse un peu ! J'ai tenté de mon côté de bidouiller un peu, mais je ne comprends pas toutes les conditions utilisés dans les modèles de menu.

Voici à quoi mon menu devrait ressembler :

Code :
<ul id="topnav"> 

        <li> 

            <a href="#">ENTETE DE SECTION LV1</a> 

                        <div class="sub"> 

                            <ul> 

                            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li> 

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

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

                           </ul> 

                           <ul> 

                            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li> 

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

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

                          </ul>                    

            </div> 

        </li>

        <li> 

            <a href="#">ENTETE DE SECTION LV1</a> 

                        <div class="sub"> 

                            <ul> 

                            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li> 

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

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

                           </ul> 

                           <ul> 

                            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li> 

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

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

                          </ul>                    

            </div> 

        </li> 

etc.....

</ul>

De mon côté, j'ai tenté de créer un menu comme ceci :

Code :
{if $count > 0}

<div id="menuwrapper">

<ul id="primary-nav">

{foreach from=$nodelist item=node}

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

{repeat string='<ul class="unli">' times=$node->depth-$node->prevdepth}

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

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

</li>

{elseif $node->index > 0}</li>

{/if}<ul id="topnav"> >

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

        <li>

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'} 

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

            <div class="sub"> 

                <ul>

{elseif $node->type == 'sectionheader'} 

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

{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}

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

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

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

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

{/if}

</ul>

{/foreach}

{/if}

En espérant que quelqu'un puisse m'aider,

Je vous remercie par avance Smile

[RESOLU] Créer un menu Dropdown - bess - 30/06/2010

Citation :<ul id="topnav">
<li>
<a href="#">ENTETE DE SECTION LV1</a>
<div class="sub">
<ul>
<li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

</ul>

<ul>
<li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li>
<a href="#">ENTETE DE SECTION LV1</a>
<div class="sub">
<ul>
<li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

</ul>

<ul>
<li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>

</ul>

en rouge : cette balise est inutile, pour preuve nos menus fonctionnent sans. La retirer (si possible) te permettras de te rapprocher d'un menu standard et donc de ne pas devoir t'emmerder à recoder la roue avec un gabarit personnalisé

en bleu des noms de class ou d'ID que tu as personnalisé mais qui restent très proches de ce qui existe déjà chez nous, second argument pour te convaincre qu'entre ton souhait et ce qui existe déjà il n'y a qu'un pas.

En résumé, si tu ne t'y connais pas suffisamment pour refaire un gabarit from-scratch (de zéro) je te conseil d'adapter ton menu existant au gabarit plutôt que l'inverse, visiblement sa structure est sensiblement identique, tu n'auras qu'a personnaliser le CSS du menu par défaut de CMS et hop c'est finit

enfin ca n'est que mon avis personnel, tous les menus de tous mes sites sont toujours un dérivé du modèle original + beaucoup de CSS personnalisé. Jamais de gabarit issu de rien

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

Code :
<ul id="topnav">

   <li>

      <a href="#">ENTETE DE SECTION LV1</a>

      <div class="sub">

         <ul> 

            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2></li>

ici, ce n'est pas logique : tu n'as pas à fermer ton <li>,

tu dois plutôt ouvrir un <ul> sinon ce serait un lien normal.

et donc, arrête-moi si je me trompe,

ton menu doit apparaître ainsi :

<ul id="topnav">

   <li>

      <a href="#">ENTETE DE SECTION LV1</a>

      <div class="sub">

         <ul>

            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2>

               <ul>

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

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

               </ul> 

            </li>

            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2> 

               <ul>

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

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

               </ul>

            </li>

         </ul>

      </div>

   </li>

   <li>

      <a href="#">ENTETE DE SECTION LV1</a> 

      <div class="sub"> 

         <ul>

            <li><h2><a href="#">ENTETE DE SECTION LV2</a></h2>

               <ul>

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

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

               </ul>

            </li>               

         </ul>

      </div> 

   </li>

</ul>

Ce serait bien également que tu sois plus précis : est-ce que tous les liens qui ont des enfants sont des entêtes de section ?

[RESOLU] Créer un menu Dropdown - FlorentCMSMS - 30/06/2010

En réalité j'utilise un plugin jquery pour créer un menu dropdown sur plusieurs niveaux.

La class "sub" correspond à ma div qui apparaît au survol.

En gros, je survole mon entête de section LV1 qui m'affiche ma div classe "sub", dans cette div, j'ai mes entêtes de section lv2 qui correspondent à des titre de colonnes. Dans mes colonnes, j'ai mes liens. ( Pour voire à quoi cela ressemble, le site de l'OL et du PSG l'utilisent très bien .)

Vu comme ça, ça ne paraît pas bien compliqué, mais la syntaxe des menus donne quelques difficultés.

Merci de votre aide Smile

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

C'est donc bien ce que je disais : tes entêtes de section level 2 ouvrent un sous menu.
Voici le code pour ce que je t'ai proposé

Code :
{if $count > 0}

<ul id="topnav">

{foreach from=$nodelist item=node}

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

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

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

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

</div><!-- fin div sub --></li>

{elseif $node->index > 0}</li>

{/if}

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

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

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

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

{else}

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

{/if}

{/foreach}

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

</ul>

{/if}

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

Est-ce que c'est un truc dans ce genre ci : http://www.confederationparascolaire.org/nos-services.html
Services est le niveau 1
Associations, écoles et enseignants sont de niveau 2
Ces dernières ouvrent un niveau 3 au survol (ici, pas de js, que du css pur Smile

et correct sur tous navigateurs y comprit IE6)

[RESOLU] Créer un menu Dropdown - FlorentCMSMS - 30/06/2010

Niveau concept c'est bien ça. Jette un coup d'oeil sur olweb.fr tu verra la nuance.

En regardant à nouveau, je pense que ce script est très proche. Tu as utilisé un template fournit avec CMSMS ?

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

C'est bien ce que je croyais, il n'y a pas de lien sur les entêtes de section.
Tu peux faire tout ça uniquement en css, pas besoin de jquery.

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

A peu près pareil à olweb, mais pur css : http://www.cssplay.co.uk/menus/drop-table.html

[RESOLU] Créer un menu Dropdown - FlorentCMSMS - 30/06/2010

Jolie manipulation de CSS. Mais j'ai un doute, en théorie, en CSS on ne peu agir que sur sélecteur à la fois non ?

Sinon serait-il possible de voir ce que donne ton site niveau template menu ? Smile

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

Pour ce que tu as besoin, regarde déjà le gabarit que je t'ai donné plus haut, il devrait te convenir.
Le gabarit de mon menu colonne gauche :

Code :
{if $count > 0}

<div id="menuHolder"> 

<ul id="menuOuter"> 

<li class="lv1-li"><!--[if lte IE 6]><a class="lv1-a" href="#"><table><tr><td><![endif]--> 

<ul id="menuInner">

{foreach from=$nodelist item=node}

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

{repeat string='<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="unli">' times=$node->depth-$node->prevdepth}

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

{repeat string='</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->' times=$node->prevdepth-$node->depth}

</li>

{elseif $node->index > 0}</li>

{/if}

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}

<li class="menuactive menuparent lv2-li current">

<a class="menuactive menuparent lv2-a" 

{elseif $node->current == true}

<li class="menuactive currentSub">

<a class="menuactive" 

{elseif $node->haschildren == true}

<li class="menuparent lv2-li">

<a class="menuparent lv2-a" 

{elseif $node->index == 0}

<li class="lv2-li"><a class="lv2-a" 

{else}

<li>

<a {/if}

{if $node->haschildren == true} href="{$node->url}">{$node->menutext}

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

{/foreach}

{repeat string='</li>' times=$node->depth-1}</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li></ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> 

</li> 

</ul>

<div class="clearb"></div>

</div>

{/if}

Pour qu'il n'apparaisse pas où il n'y a pas d'enfant, je l'ai appelé ainsi dans le gabarit :
{if $cgsimple->get_root_alias() =="nos-services" or $cgsimple->get_root_alias() =="qui-sommes-nous"}
<div class="sidebar">
<h2>Navigation</h2>
{menu template='confede' start_level="2"}
</div>
{/if}
Le menu horizontal étant bloqué au premier niveau avec number_of_levels="1".

[RESOLU] Créer un menu Dropdown - FlorentCMSMS - 30/06/2010

Jean, j'ai testé ton code un peu plus haut, et c'est exactement ça !

Il y a du niveau Smile

Bien joué et merci Smile

[RESOLU] Créer un menu Dropdown - Jean le Chauve - 30/06/2010

Tu n'as plus qu'à marquer [résolu] dans le titre du post Wink