Bonjour,
Mon site actuel XHTML et CSS + un peu de javascript pour la sélection de la langue et pour le menu déroulant est réalisé avec des frames.
Le menu est basé sur votre tutoriel
et mentionné dans la page d'accueil de mon site.
Je suis en train de le refaire en abandonnant la structure en cadres et en utilisant PHP et des 'include'.
Le problème est que, à chaque chargement d'une page, le menu se referme du fait du rechargement de la page.
Je viens de découvrir le tutoriel "Créer un menu "accordéon" avec jQuery :
permettant, notamment, de garder un sous-menu ouvert; c'est la réponse à mon problème.
Problème:
Avec l'un ou l'autre des ficiers javascript désactivé, le menu apparait complètement déroulé, c'est normal.
Lorsque les fichiers javascript sont actifs, le menu est fermé, mais impossible à ouvrir. En effet, il n'y a pas de lien sur l'élément de liste (Pyrénées 2004) contenant le sous-menu.
Où se situe le problème ? Je peux supposer que cela a un rapport avec li.open et li.toogleSubMenu mais je ne sais comment agir avec ces éléments (trop débutant).
Voici le fichier "index.php"
Voici "menu.js" (intégralement repris de votre tutoriel):
Voici une partie de "menu.php", correspondant à 'Pyrénées 2004', et structuré comme suggéré dans l'article avec la classe "toogleSubMenu". Je n'utilise aucune image.
Merci d'avance pour votre aide.
Zénobe
Mon site actuel XHTML et CSS + un peu de javascript pour la sélection de la langue et pour le menu déroulant est réalisé avec des frames.
Le menu est basé sur votre tutoriel
et mentionné dans la page d'accueil de mon site.
Je suis en train de le refaire en abandonnant la structure en cadres et en utilisant PHP et des 'include'.
Le problème est que, à chaque chargement d'une page, le menu se referme du fait du rechargement de la page.
Je viens de découvrir le tutoriel "Créer un menu "accordéon" avec jQuery :
permettant, notamment, de garder un sous-menu ouvert; c'est la réponse à mon problème.
Problème:
Avec l'un ou l'autre des ficiers javascript désactivé, le menu apparait complètement déroulé, c'est normal.
Lorsque les fichiers javascript sont actifs, le menu est fermé, mais impossible à ouvrir. En effet, il n'y a pas de lien sur l'élément de liste (Pyrénées 2004) contenant le sous-menu.
Où se situe le problème ? Je peux supposer que cela a un rapport avec li.open et li.toogleSubMenu mais je ne sais comment agir avec ces éléments (trop débutant).
Voici le fichier "index.php"
<?php
//Ouverture session
session_start();
if ( empty( $_SESSION['langue']))
$_SESSION['langue'] = 'fr';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Randonnées</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="menu.css" />
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<div id="gauche">
<div id="langue">
<form method="post" action="index.php">
<p>Langue - lengua : <br />
<input type="radio" name="langue" value="fr" id="fr" /><label for="fr"> Français</label><br />
<input type="radio" name="langue" value="es" id="es" /><label for="es"> Espagnol</label><br />
<input type="submit" name="submit" /></p>
</form>
</div>
<div id="menu">
<?php
if ( isset($_POST['submit'] ))
{ $_SESSION['langue'] = $_POST['langue']; }
if ( $_SESSION['langue'] == 'fr' )
include ("pages/menus/menu_fr.php");
elseif ( $_SESSION['langue'] == 'es' )
include ("pages/menus/menu_es.php");
?>
</div>
</div>
<!-- Appel des pages -->
<div id="corps">
<?php
$page = $_GET['page'];
if (file_exists("pages/$page.htm") == TRUE)
{include("pages/$page.htm");}
else {include("pages/intros/accueil.htm");}
?>
</div>
</body>
</html>
Voici "menu.js" (intégralement repris de votre tutoriel):
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$(".navigation ul.subMenu:not('.open_at_load')").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu 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 "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.submenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
Voici une partie de "menu.php", correspondant à 'Pyrénées 2004', et structuré comme suggéré dans l'article avec la classe "toogleSubMenu". Je n'utilise aucune image.
<ul class="navigation">
<li><a href="index.php?page=intros/accueil">Page d'accueil</a></li>
<li class="toogleSubMenu"><span>Pyrénées 2004</span>
<ul class="subMenu">
<li><a href="index.php?page=cg2004/cg_fr/p1c_fr">Canigou</a></li>
<li><a href="index.php?page=cg2004/cg_fr/p2c_fr">Canigou</a></li>
<li><a href="index.php?page=cg2004/cg_fr/p3c_fr">Suite</a></li>
<li><a href="index.php?page=cg2004/cg_fr/p4c_fr">Suite</a></li>
<li><a href="index.php?page=cg2004/cg_fr/p5c_fr">Brèche de Roland</a></li>
<li><a href="index.php?page=cg2004/cg_fr/p6c_fr">Suite</a></li>
</ul>
</li>
<li><a href="index.php?page=liens">Quelques liens</a></li>
</ul>
Merci d'avance pour votre aide.
Zénobe
