Et ben ! Chapeau !!
Merci beaucoup !! Ca marche !
Maintenant, un autre petit soucis, j'aimerais que quand je clique sur "Item 2", puis sur ""mon lien", le menu reste ouvert à l'appel de la page.
Voici le code : je pensais que ça allait marcher !
<?
session_start(); // Démarrage de la session
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Office Municipal des Sports de Saint-Galmier</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords"
content="office, Office, municipal, Municipal, sports, sport, OMS, O.M.S., Saint-Galmier, St-Galmier, saint-galmier, st-galmier, saint galmier, Saint Galmier, associations, horaires, manifestations">
<meta name="description"
content="Toutes les informations sur la vie sportive à Saint-Galmier : office municipal des sports, associations, horaires, manifestations, ... Et en plus de nombreux renseignements pour mieux gérer votre association">
<LINK REL="stylesheet" TYPE="text/CSS" HREF="../fichiers/styles.css">
<link rel="stylesheet" href="../fichiers/typographie.css" type="text/css">
<link rel="stylesheet" href="../fichiers/habillage.css" type="text/css" media="print, projection, screen, tv">
<link rel="alternate" type="application/rss+xml" title="<:syndiquer_site:>" href="backend.php3">
<style type="text/css">
#navigation {
margin: 0;
padding: 0;
list-style: none:
background: #000;
color: #fff;
width: 200px;
font: 1.2em "Trebuchet MS", sans-serif;
}
#navigation a, #navigation span {
display: block;
padding: 4px 10px;
color: #fff;
text-decoration: none;
background: #000 url(menu-item.png) left bottom no-repeat;
}
#navigation .toggleSubMenu a, #navigation .toggleSubMenu span {
background-image: url(menu-item-deroule.png);
}
#navigation .open a, #navigation .open span {
background-image: url(menu-item-enroule.png);
}
#navigation a:hover, #navigation a:focus, #navigation a:active {
text-decoration: underline;
}
#navigation .subMenu {
font-size: .8em;
background: #ccc url(subMenu.png) 0 0 repeat-x;
font-size: .9em;
margin: 0;
padding: 0;
border-bottom: 1px solid #666;
}
#navigation ul.subMenu a {
background: none;
padding: 3px 20px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
li {
height: 1px;
}
</style>
<![endif]-->
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$("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 :
$("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" :
$("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 {
$("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;
});
} ) ;
// -->
</script>
</head>
<body>
<table>
<tr><td>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li class="toggleSubMenu"><span>Item 2</span>
<ul class="subMenu">
<li><a href="http://www.oms-stgalmier.com/menu08bis.php?page=test" class="<?php echo ($_GET['page'] == 'test') ? 'open_at_load' : '' ?>" title="">mon lien</a></li>
<li><a href="#" title="">Item 2.2</a></li>
<li><a href="#" title="">Item 2.3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>Item 3</span>
<ul class="subMenu">
<li><a href="#" title="">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</td></tr></table>
</body>
</html>
Et puis, est-ce que je peux aussi appeler une page quand je clique sur Item 2 ?
J'aimerais que ça puisse ouvrir le sous-menu et aussi ouvrir une page. Je ne sais pas si on peut faire ça !
Merci encore, trop sympa !
Cordialement,
Anthony
Modifié par antow42 (19 Jul 2008 - 12:25)
