bonjour, je suis nouveau sur ce forum, et néophyte en tout ce qui concerne la programmation.
Ma question sera donc sûrement mal posée, ou déjà vu dans ce forum. Mais à mon niveau, je n'arrive pas à comprendre la moitié de ce qui s'est déjà dit sur le sujet.
Je tente de modifier un menu déroulant vertical "accordéon", pour qu'il y est plusieurs niveaux de cascade, et j'ai bien peur de ne pas comprendre tout ce qui ce passe.
Par "plusieurs niveau de cascade", je veux dire qu'il y ai plus que "juste" menu et sous menu, mais menu, sous menu, puis sous-sous menus
Quelqu'un pourrait-il m'aider?
voici le code initial :
Merci ) tous
Lethys
Ma question sera donc sûrement mal posée, ou déjà vu dans ce forum. Mais à mon niveau, je n'arrive pas à comprendre la moitié de ce qui s'est déjà dit sur le sujet.
Je tente de modifier un menu déroulant vertical "accordéon", pour qu'il y est plusieurs niveaux de cascade, et j'ai bien peur de ne pas comprendre tout ce qui ce passe.
Par "plusieurs niveau de cascade", je veux dire qu'il y ai plus que "juste" menu et sous menu, mais menu, sous menu, puis sous-sous menus
Quelqu'un pourrait-il m'aider?
voici le code initial :
<!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" />
<title>:: Accordion ::</title><!-- JQUERY -->
<script src="scripts/jquery.tools.min.js" type="text/javascript">
</script>
<!--[if IE]>
Rien que pour IE ! Parce que les autres navigateurs interprètent ceci comme un commentaire.
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!-- ACCORDION -->
<style type="text/css" title="text/css">
/*<![CDATA[*/
/* menu de gauche*/
#left {
position: relative;
width: 110px;
float: left;
background-color: #C69;
padding: 10px 15px 20px 10px;
z-index: 10;
}
/*first menu*/
.firstmenu, a.firstmenu, a.firstmenu:link, a.firstmenu:active, a.firstmenu:visited {
position: relative;
display: block;
color: #916;
background-color: #FCF;
padding: 10px 10px 5px 10px;
margin-top: 2px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
a.firstmenu:hover {
color: #FCF;
background-color: #916;
text-decoration: underline;
}
/*sub menu*/
.secondmenu, a.secondmenu, a.secondmenu:link, a.secondmenu:active, a.secondmenu:visited {
position: relative;
display: block;
color: #000;
background-color: #CF9;
padding: 10px 10px 5px 10px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
a.secondmenu:hover {
color: #9C6;
background-color: #000;
text-decoration: underline;
}
/* ACCORDION - NE PAS TOUCHER AUX STYLES - SEULEMENT CHANGER LES NOMS DES CLASS ET ID SI BESOIN */
#left a.firstmenu #current {
cursor: default;
background-color: #fff;
}
#left div.pane {
display: none;
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<div id="left">
<h1>Left</h1>
<!-- ACCORDION -->
<!-- first-menu 1 -->
<a href="#" target="_self" class="firstmenu" id="current" name="current">Left 1.</a>
<!-- id="current" important pour le premier menu ! -->
<!-- sous menu 1 -->
<div class="pane">
<a href="#" target="_self" class="secondmenu">Left 1.a</a>
<a href="#" target="_self" class="secondmenu">Left 1.b</a>
</div>
<!-- first-menu 2 -->
<a href="#" target="_self" class="firstmenu">Left 2.</a>
<!-- sous menu 2 -->
<div class="pane">
<a href="#" target="_self" class="secondmenu">Left 2.a</a>
<a href="#" target="_self" class="secondmenu">Left 2.b</a>
<a href="#" target="_self" class="secondmenu">Left 2.c</a>
</div>
<!-- first-menu 3 -->
<a href="#" target="_self" class="firstmenu">Left 3.</a>
<!-- sous menu 3 -->
<div class="pane">
<a href="#" target="_self" class="secondmenu">Left 3.a</a>
<a href="#" target="_self" class="secondmenu">Left 3.b</a>
<a href="#" target="_self" class="secondmenu">Left 3.c</a>
</div>
<!-- first-menu 4 -->
<a href="#" target="_self" class="firstmenu">Left 4.</a>
<!-- sous menu 4 -->
<div class="pane"></div>
</div>
<!-- ACCORDION -->
<!-- PLACER LE SCRIPT DE L'ACCORDION ICI ! -->
<script type="text/javascript">
//<![CDATA[
// Adapter #left, #left div.pane (panneaux a afficher), a.firstmenu (first-menu), selon les noms des class et ID utilises
$(function() {
$("#left").tabs("#left div.pane", {tabs: 'a.firstmenu', effect: 'slide', initialIndex: null});
});
//]]>
</script> <!-- activate tabs with JavaScript -->
<script type="text/javascript">
//<![CDATA[
//
// add new effect to the tabs
$.tools.tabs.addEffect("slide", function(i, done) {
// 1. COULEUR DU FOND !
this.getPanes().slideUp().css({backgroundColor: "#C69"});
// 2. after a pane is revealed, its background is set to its original color (transparent)
this.getPanes().eq(i).slideDown(function() {
$(this).css({backgroundColor: 'transparent'});
// the supplied callback must be called after the effect has finished its job
done.call();
});
});
//]]>
</script>
Merci ) tous
Lethys