Bonjour à tous,
Je suis actuellement en train de concevoir un site et j'ai inseré un menu accordéon avec jQuery comme celui disponible dans les tutos.
Cependant un problème se pose.
En effet, je voudrais que à chaque rubrique soit associé un fond d'écran différent. le tout en javascript. xD
voici mon code, la page complete avec 2 scripts:
un pour changer le fond d'écran et un autre pour animer le menu.
mais les 2 ensemble fonctionnent mal: quand on clique sur les rubriques le menu souvre mais quand on clique sur le texte le fond change ..
Je suis actuellement en train de concevoir un site et j'ai inseré un menu accordéon avec jQuery comme celui disponible dans les tutos.
Cependant un problème se pose.
En effet, je voudrais que à chaque rubrique soit associé un fond d'écran différent. le tout en javascript. xD
voici mon code, la page complete avec 2 scripts:
un pour changer le fond d'écran et un autre pour animer le menu.
mais les 2 ensemble fonctionnent mal: quand on clique sur les rubriques le menu souvre mais quand on clique sur le texte le fond change ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>eco-conception</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table width="955" border="0" cellspacing="0" cellpadding="0" align="left" height="600">
<tr>
<td rowspan="3" valign="top" width="420">
</td>
<td colspan="2" align="right" valign="top">
<table width="180" border="0" cellspacing="0" cellpadding="0">
<tr height="5">
<td align="right" valign="top" height="5"></td>
<td align="right" valign="top" height="5"></td>
<td align="right" valign="top" height="5"></td>
</tr>
<tr>
<td align="right" valign="top"><font size="1" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">blog</font></td>
<td align="right" valign="top"><font size="1" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">goodies</font></td>
<td align="right" valign="top"><font size="1" face="Helvetica, Geneva, Arial, SunSans-Regular, sans-serif">contact</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td rowspan="2" colspan="2">
<ul class="navigation">
<li>
<div>
<style type="text/css">
.table{
list-style:none;
}
#navigation {
margin: 0;
padding: 0;
list-style: none;
background: none;
color: #000000;
width: 400px;
font: 10pt "helvetica", sans-serif;
list-style:none;
}
.navigation{
list-style:none
}
#navigation a, #navigation span {
width: 500px;
height: 16px;
display:block;
color: #fff;
background-color: #555555;
text-decoration: none;
padding-left: 5px;
margin-bottom: 5px;
}
#navigation b {
display: block;
font: 8pt "helvetica", sans-serif;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 5px;
text-position: left;
color: #000000;
text-decoration: none;
border-bottom: none;
list-style:none;
}
#toggleSubMenu span{
text-decoration:none;
list-style: none;
}
#navigation .toggleSubMenu a, .navigation .toggleSubMenu span {
}
#navigation .open a, .navigation .open span {
}
#navigation a:hover, .navigation a:focus, .navigation a:active {
text-decoration: none;
}
#navigation .subMenu {
width:300px;
font: .8em "helvetica", sans-serif;
text-align: left;
background: none;
margin: 0;
padding: 0;
list-style:none;
list-style-type: none;
}
#navigation ul.subMenu a {
background: none;
padding: 10px 10px;
}
.soustitre{
margin:0;
padding:0;
}
</style>
<script language="javascript" type="text/javascript">
<!--
function afficher(lemsg) {
if(lemsg == "Bouh") {
document.body.style.background = "url(image1.jpg)";
} if(lemsg == "Daim"){
document.body.style.background = "url(image2.jpg)";
}
}
-->
</script>
<script type="text/javascript" src="jquery.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 selectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'element 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>'+ '</b>') ;
} ) ;
// On modifie l'evenement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$("li.toggleSubMenu > a").click( function () {
// Si le sous-menu etait deja 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 cache, 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>
</div>
<body>
<ul id="navigation">
<li class="toggleSubMenu" onclick="afficher('Daim')"><span>Moi</span>
<ul class="subMenu">
<li><b title=""><h4 class="Bouh" >titre</h4><br/>
texte bobobolo </b></li>
</ul>
</li>
<li class="toggleSubMenu" onclick="afficher('Daim')"><span>Toi</span>
<ul class="subMenu">
<li><b title=""><h3>sous titre</h3><br/>
bolobolo </b></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
</li>
</ul>
</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>