[Résolu] Menu cascade - aide pour modifier mon template

[Résolu] Menu cascade - aide pour modifier mon template - 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 : [Résolu] Menu cascade - aide pour modifier mon template (/thread-653.html)

[Résolu] Menu cascade - aide pour modifier mon template - mabelle - 09/09/2010

Bonjour, j'ai un menu cascade qui fonctionne bien, installé avec jquery.

Je veux maintenant laisser le sous menu ouvert lorsque celui-ci est actif. Je dois donc attribuer à ce sous menu une classe "open".

Voici le code de mon menu. Quand mon sous menu est ouvert, il lui faudrait la class "sousmenu open".
Je peux attribuer une variable open à mes pages de sous menu lorsques celle-ci sont ouvertes.

Code :
{assign var='open' value='1'}

Code :
{if $count > 0}

<ul class="menu">

{foreach from=$nodelist item=node}

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

{* à ce point, je vérifie si open et si oui, la class="sousmenu open" et sinon, la class="sousmenu"

Je sais pas trop comment faire. J'ai essayé des trucs (if isset($open)) mais je n'arrive pas au résultat souhaité.*}

{repeat string='<ul class="sousmenu">' 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}

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

<li class="toggle">

<a class="toggle" 

{else}

<li>

<a {/if}

{if $node->sectionheader == true}

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

{elseif $node->haschildren == true and $node->sectionheader == false}

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

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

{if $node->target}target="{$node->target}" {/if}

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

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

><span class="sectionheader">{$node->menutext}</span></a>

{/if}

{/foreach}

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

</li>

</ul>

{/if}

Voici aussi la structure html de mon menu:

Code :
<ul class="menu">

<li>lien 1</li>

<li>lien 2 (entête de section)

   <ul class="sousmenu">

      <li>lien 2.1</li>

      <li>lien 2.2</li></ul></li>

<li>lien 3</li>

<li>lien 4 (entête de section)

   <ul class="sousmenu">

      <li>lien 4.1</li>

      <li>lien 4.2</li></ul></li>

<li>lien 1</li>

</ul>

Merci à l'avance pour votre aide Smile

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.8.0
#~ Nom de l'hébergeur :
#~ Informations Système :
#~ Cms Version: 1.8
#~ Installed Modules:
#~ CMSMailer: 2.0
#~ FileManager: 1.0.2
#~ MenuManager: 1.6.5
#~ ModuleManager: 1.4
#~ News: 2.10.6
#~ nuSOAP: 1.0.1
#~ Printing: 1.1.0
#~ Search: 1.6.5
#~ ThemeManager: 1.1.1
#~ TinyMCE: 2.7.2
#~ FormBuilder: 0.6.2
#~ jQuery: 0.0.5
#~ CGSimpleSmarty: 1.4.5
#~ Config Information:
#~ php_memory_limit: 64M
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 30000000
#~ default_upload_permission: 664
#~ url_rewriting: mod_rewrite
#~ page_extension: .html
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.2.9
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 64M
#~ max_execution_time: 30
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 2M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi
#~ Server Db Type: MySQL (mysql)
#~ Server Db Version: 5.0.91
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~

[Résolu] Menu cascade - aide pour modifier mon template - airelibre - 09/09/2010

Bonsoir,

Ne voyant pas très bien ce que tu souhaites faire, aurais-tu un exemple intégré ? Quel type de menu JQuery as-tu utilisé ?

Merci !

[Résolu] Menu cascade - aide pour modifier mon template - mabelle - 10/09/2010

Bonsoir aussi,

Voici mon menu actuel sur ce lien. Il fonctionne bien mais je voudrais que mon sous menu reste ouvert quand je suis sur une page du sous menu.

Voici mon script:

Code :
<script type="text/javascript"> 

<!-- 

$(document).ready( function () { 

    // On cache les sous-menus : 

    $(".menu ul.sousmenu:not('.open_at_load')").hide(); 

    // On sélectionne tous les items de liste portant la classe "toggle" 

    // et on remplace l'élément span qu'ils contiennent par un lien : 

    $(".menu li.toggle span").each( function () { 

        // On stocke le contenu du span : 

        var TexteSpan = $(this).text(); 

        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 

    } ) ; 

    // On modifie l'évènement "click" sur les liens dans les items de liste 

    // qui portent la classe "toggle" : 

    $(".menu li.toggle > a").click( function () { 

        // Si le sous-menu était déjà ouvert, on le referme : 

        if ($(this).next("ul.sousmenu:visible").length != 0) { 

            $(this).next("ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

        } 

        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 

        else { 

            $(".menu ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

            $(this).next("ul.sousmenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 

        } 

        // On empêche le navigateur de suivre le lien : 

        return false; 

    }); 

} ) ; 

// --> 

</script>

Merci !

[Résolu] Menu cascade - aide pour modifier mon template - Jean le Chauve - 12/09/2010

A première vue, je placerais en commentaire ce morceau

Code :
Si le sous-menu était déjà ouvert, on le referme : 

       if ($(this).next("ul.sousmenu:visible").length != 0) { 

            $(this).next("ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

        }

A première vue, seulement Wink

[Résolu] Menu cascade - aide pour modifier mon template - mabelle - 12/09/2010

Bonjour Jean et merci pour ta réponse.

Oui, je crois que c'est une piste. Je vais tester plus tard cette semaine. Je travaille à modifier mon script plutôt que le menu qui ressemble à

Code :
<ul class="menu">

<li>lien 1</li>

<li class="toggle">lien 2 (entête de section)

   <ul class="sousmenu">

      <li class="active">lien 2.1 (lien actif, sous menu reste ouvert)</li>

      <li>lien 2.2</li></ul></li>

<li>lien 3</li>

<li class="toggle">lien 4 (entête de section)

   <ul class="sousmenu">

      <li>lien 4.1</li>

      <li>lien 4.2</li></ul></li>

<li>lien 1</li>

</ul>

[Résolu] Menu cascade - aide pour modifier mon template - mabelle - 12/09/2010

Jean, je n'ai pas tester ta solution mais j'ai utilisé plutôt celle-ci:

Code :
<script type="text/javascript"> 

<!-- 

$(document).ready( function () { 

     // On cache tout les sous-menus   

    // on affiche celui qui est derrière un "li.active" :   

    $(".menu ul.sousmenu").hide();   

    $(".menu li.active").parent("ul").show(); 

    // On sélectionne tous les items de liste portant la classe "toggle" 

    // et on remplace l'élément span qu'ils contiennent par un lien : 

    $(".menu li.toggle span").each( function () { 

        // On stocke le contenu du span : 

        var TexteSpan = $(this).text(); 

        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 

    } ) ; 

    // On modifie l'évènement "click" sur les liens dans les items de liste 

    // qui portent la classe "toggle" : 

    $(".menu li.toggle > a").click( function () { 

        // Si le sous-menu était déjà ouvert, on le referme : 

        if ($(this).next("ul.sousmenu:visible").length != 0) { 

            $(this).next("ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

        } 

        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 

        else { 

            $(".menu ul.sousmenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 

            $(this).next("ul.sousmenu").slideDown("normal", function () { $(this).parent().addClass("open") }); 

        } 

        // On empêche le navigateur de suivre le lien : 

        return false; 

    }); 

} ) ; 

// --> 

</script>

Voilà le tour est joué et tout fonctionne impeccablement.

[Résolu] Menu cascade - aide pour modifier mon template - Jean le Chauve - 12/09/2010

Félicitations Smile