[Résolu] Menu accordéon ... ajouter une classe open_at_load

Bonsoir

J'ai suivi le tuto "Créer un menu déroulant “accordéon” avec jQuery", superbe travail !

Tout est OK, je bloque bêtement sur un petit truc ...
C'est pour Garder un sous-menu ouvert.

a écrit :
Si votre site est statique, il suffit d'ajouter à la main une classe (par exemple "open_at_load") sur le sous-menu que vous voulez garder ouvert (en fonction de la page).

Ben, je doit être fatiguer là, mais je vois pas comment faire

Je pense que vous n'avez pas besoin de mon code, étant donné que c'est simplement la méthodologie pour ajouter une classe à la main ...
Honte à moi ...
Help

P.S. : bien sur j'ai fait des essais ... genre ajouter la classe dans le <li class="toggleSubMenu">, dans le <ul class="subMenu">, ...

Le tutoriel a écrit :
Si votre site est statique, il suffit d'ajouter à la main une classe (par exemple "open_at_load") sur le sous-menu que vous voulez garder ouvert (en fonction de la page).

Et donc, est-ce le cas de ton site? Est-ce que tu as un menu différent sur chaque page? Ou bien est-ce que tu utilises le même code pour le menu sur toute les pages, code stoqué dans un fichier unique et que tu appellerais avec la fonction include en PHP, par exemple?

Si le site est complètement statique (chaque page est un fichier HTML qui contient sa propre copie du menu), tu peux modifier chaque page pour que les sous-menus devant être fermés utilisent le code suivant:

<ul class="subMenu">...</ul>

quant au sous-menu à garder ouvert à l'affichage de la page en question, ce sera:

<ul class="subMenu open_at_load">...</ul>

Bien entendu, cette classe n'est prise en compte que par la version modifiée du script JavaScript que l'on trouve sur la page que tu indiques. Le script «finalisé» présent à la page précédente ne présente pas cette option.

Voilà pour l'essentiel. Quelques recommendations générales maintenant:
1. Donner plus de précisions sur ton code, c'est bien. C'est parfois indispensable pour qu'on puisse t'aider. Dans l'idéal, il faut nous donner un lien vers le site ou vers une page de test en ligne.
2. Quelques lacunes de HTML, peut-être? Savais-tu que l'on peut placer plusieurs classes sur un même élément? Avais-tu repéré, en lisant le tutoriel, qu'il fallait placer la classe donnée sur un élément UL?
3. Avoir des notions en JavaScript, et ici en jQuery, est indispensable pour bien comprendre le tutoriel et éviter le «ah ben ça marche pas en copiant-collant, et j'y panne strictement rien, c'est con je suis bloqué».

Oui, c'est tout bête, je n'avais jamais eu besoin de mettre plusieurs classe sur un même élément

Solution simple pour question simpliste !
Milles merci !

D'ici peu, je vous présenterai mon site, histoire d'avoir le point de vue de pro

Hello,

Florent, j'ai excatement le même soucis mais avec un site dynamique. Mon menu est un include (asp, mais pourrait etre en php). Je ne comprends sur quoi je peux conditionner le fait de laisser mon menu ouvert sur la bonne page. le nom de la page ?

page brute ici http://dev.philweb.fr/item1.asp

Merci de ton aide
Phil

J'ai moi aussi le même problème avec un site dynamique (PHP) je ne vois pas comment faire (je suis débutant en PHP).
Le tuto parle bien d'une variable $_GET['page'] mais je ne vois pas quoi en faire...

Merci de m'éclairer.

Hello,

Flyman30 a écrit :
J'ai moi aussi le même problème avec un site dynamique (PHP) je ne vois pas comment faire (je suis débutant en PHP).
Le tuto parle bien d'une variable $_GET['page'] mais je ne vois pas quoi en faire...

Un exemple avec page numérique :

$page_en_cours = !empty($_GET['page']) ? intval($_GET['page']) : 0;
$menu = array(
	'Item 1'	=>	1,
	'Item 2'	=> array(
						'Item 2.1'	=>	2,
						'Item 2.2'	=>	3,
						'Item 2.3'	=>	4
					),
	'Item 3'	=> array(
						'Item 3.1'	=>	5,
						'Item 3.2'	=>	6
					),
	'Item 4'	=>	7
);
// Génération du menu
echo '<ul class="navigation">'."\n";
foreach($menu as $key => $value) {
	if(!is_array($value)) {	// pas de sous-menu
		echo "\t".'<li><a href="'.htmlspecialchars($_SERVER['PHP_SELF']).'?page='.$value.'">'.$key.'</a></li>'."\n";
	} else {	// sous-menu
		$classe_en_cours = in_array($page_en_cours, $value) ? ' open_at_load' : '';
		echo "\t".'<li class="toggleSubMenu"><span>'.$key.'</span>'."\n";
		echo "\t\t".'<ul class="subMenu'.$classe_en_cours.'">'."\n";
		foreach($value as $keySM => $valueSM) {
			echo "\t\t\t".'<li><a href="'.htmlspecialchars($_SERVER['PHP_SELF']).'?page='.$valueSM.'">'.$keySM.'</a></li>'."\n";
		}
		echo "\t\t</ul>\n\t</li>\n";
	}
}
echo "</ul>\n";

Edit: pour une valeur de page alphanumérique c'est quasiment pareil :

$page_en_cours = !empty($_GET['page']) ? trim($_GET['page']) : ''; 
$menu = array( 
    'Accueil'    =>    'accueil', 
    'Ma vie'    => array( 
                        'Ma passion'	=>    'passion', 
                        'Mon vélo'	=>    'velo', 
                        'Mes plantes'	=>    'plantes' 
                    ), 
    'Mon oeuvre'    => array( 
                        'Mes peintures'		=>    'peintures', 
                        'Mes sculptures'	=>    'sculptures' 
                    ), 
    'FAQ'    =>    'faq'
); 

Modifié par Heyoan (01 Mar 2010 - 12:36)

merci beaucoup de ton aide.
Il me reste un souci, j'ai modifié ton menu pour utiliser les noms de fichiers, mais j'obtiens des liens de la forme

http://localhost/new-ter/connaitrelatruitephp

comme on le constate il manque le point de l'extension, et je n'arrive pas à le faire apparaitre..
voila le code d'une partie du menu :

$page_en_cours = !empty($_GET['page']) ? intval($_GET['page']) : 0; 
$menu = array( 
    'Accueil'    =>    Index.php,  
    'Connaitre la truite'    => array( 
                        'connaitrelatruite'    =>    connaitrelatruite.php, 
                        'Les souches de truites'    =>    souches.php, 
                        'atlantique ou med ?'    =>    atlantiqueoumed.php, 
												'la vue de la truite'    =>    vue.php,
												'Les belles du site'    =>    bellesdusite.php
												
                    ), 
    'Le Toc'    => array( 
                        'Le toc'    =>    toc.php,
												'L\'équipement'    =>    equipement.php,
												'Cannes et moulinet'    =>    cannesetmoulinets.php,
												'Corps et bas de ligne'    =>    ligne.php,
												'Les plombées'    =>    plombees.php,
												'Les appâts'    =>    appats.php,
												'Elever ses teignes'    =>    teignes.php,
												'Elever ses vers'    =>    vers.php 
                    ), 
    'La pêche au fouet'    =>    mouche.php 
); 
// Génération du menu 
echo '<ul class="navigation">'."\n"; 
foreach($menu as $key => $value) { 
    if(!is_array($value)) {    // pas de sous-menu 
        echo "\t".'<li><a href="'.$value.'">'.$key.'</a></li>'."\n";
    } else {    // sous-menu 
        $classe_en_cours = in_array($page_en_cours, $value) ? ' open_at_load' : ''; 
        echo "\t".'<li class="toggleSubMenu"><span>'.$key.'</span>'."\n"; 
        echo "\t\t".'<ul class="subMenu'.$classe_en_cours.'">'."\n"; 
        foreach($value as $keySM => $valueSM) { 
            echo "\t\t\t".'<li><a href="'.$valueSM.'">'.$keySM.'</a></li>'."\n"; 
        } 
        echo "\t\t</ul>\n\t</li>\n"; 
    } 
} 
echo "</ul>\n";

Désolé en lisant ton édit j'ai compris mon erreur , il fallait mettre le nom de la page entre ' '

Un grand merci

A ben non c'était trop beau !

Lorsqu'on appelle un page tous les sous menus sont ouvert !

Une idée ?

Flyman30 a écrit :
Une idée ?

Donc visiblement tu ne connais pas la notion de site dynamique. Pour simplifier il s'agit d'une structure dans laquelle on n'utilise qu'une seule page php (par exemple index.php) et c'est une variable en GET qui permet de définir le contenu à afficher (par exemple : index.php?page=connaitrelatruite ou index.php?page=equipement

Comme ton site est statique (chaque url correspond à un fichier réel sur ton serveur) tu pourrais faire :

$page_en_cours = basename($_SERVER['PHP_SELF']);
$menu = array(  
    'Accueil'    =>    'index.php',   
    'Connaitre la truite'	=>	array(
		'connaitrelatruite'			=>	'connaitrelatruite.php',
		'Les souches de truites'	=>	'souches.php',
		'atlantique ou med ?'		=>	'atlantiqueoumed.php',
		'la vue de la truite'		=>	'vue.php',
		'Les belles du site'		=>	'bellesdusite.php'),  
    'Le Toc'    => array(
		'Le toc'    			=>	'toc.php',
		'L\'équipement'			=>	'equipement.php',
		'Cannes et moulinet'	=>	'cannesetmoulinets.php',
		'Corps et bas de ligne'	=>	'ligne.php',
		'Les plombées'			=>	'plombees.php',
		'Les appâts'    		=>	'appats.php',
		'Elever ses teignes'    =>	'teignes.php',
		'Elever ses vers'    	=>	'vers.php'),  
    'La pêche au fouet'    =>    'mouche.php'
);  
// Génération du menu 
echo '<ul class="navigation">'."\n"; 
foreach($menu as $key => $value) { 
    if(!is_array($value)) {    // pas de sous-menu
		$page_active = ($page_en_cours == $value) ? ' id="en_cours"' : '';
        echo "\t".'<li'.$page_active.'><a href="'.$value.'">'.$key.'</a></li>'."\n"; 
    } else {    // sous-menu 
        $classe_en_cours = in_array($page_en_cours, $value) ? ' open_at_load' : ''; 
        echo "\t".'<li class="toggleSubMenu"><span>'.$key.'</span>'."\n"; 
        echo "\t\t".'<ul class="subMenu'.$classe_en_cours.'">'."\n"; 
        foreach($value as $keySM => $valueSM) { 
			$page_active = ($page_en_cours == $valueSM) ? ' id="en_cours"' : '';
            echo "\t\t\t".'<li'.$page_active.'><a href="'.$valueSM.'">'.$keySM.'</a></li>'."\n"; 
        } 
        echo "\t\t</ul>\n\t</li>\n"; 
    } 
} 
echo "</ul>\n";

Modifié par Heyoan (01 Mar 2010 - 14:23)

Hourra ça marche

merci, merci

De rien.

je viens d'éditer le code pour mettre un id en_cours sur le LI correspondant à la page active.

Heyoan a écrit :
De rien.

je viens d'éditer le code pour mettre un id en_cours sur le LI correspondant à la page active.

Merci

<Modération: message supprimé. Merci de ne pas parasiter les sujets des autres membres.>
Modifié par Florent V. (01 Jun 2010 - 22:53)

<Modération: message supprimé. Merci de ne pas parasiter les sujets des autres membres.>
Modifié par Florent V. (01 Jun 2010 - 22:53)

<Modération: message supprimé. Merci de ne pas parasiter les sujets des autres membres.>
Modifié par Florent V. (01 Jun 2010 - 22:45)

La demande initiale de tsouliang ayant été résolue, puis celle de Flyman30, il est temps d'arrêter les frais et de fermer ce sujet. En une seule page de ce sujet, SIX PERSONNES sont intervenues pour demander une aide PERSONNALISÉE, ce qui donne au final une situation ingérable.

J'ai supprimé une partie des demandes qui étaient restées sans réponse. Les auteurs de ces demandes peuvent créer chacun un sujet spécifique à leur site et à leur problème.