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

[mabelle]

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

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

[airelibre]

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 !

[mabelle]

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 !

[Jean le Chauve]

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

[mabelle]

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>

[mabelle]

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.

[Jean le Chauve]

Félicitations