11548 sujets

JavaScript, DOM et API Web HTML5

Menu accordeon

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 : 


<!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
Sujet clos
Aller à