Menu avec un onglet accordéon

Bonjour,

Et tout d'abord merci pour les multiples et très bons tutoriels présents sur ce site !

J'ai beaucoup apprécié le fonctionnement du menu en accordéon, et souhaiterais l'utiliser sur le site que je suis en train de réaliser.

Mais étant complètement novice dans le domaine, j'ai eu beau tâtonner pendant des heures, je n'ai point réussi à ce que je voulais, ni même à isoler ce qui empêchait le tout de fonctionner C'est pourquoi je me permets de crier à l'aide !

Il s'agit d'un menu horizontal de 4 boutons : les 3 premiers affichent une liste classique, sans sous-menu, et je voudrais que le 4e, lui, soit en accordéon.

Mais, comment intégrer le principe d'accordéon dans une architecture de menu "classique" ?

J'ai tenté ceci :

HTML :

<ul>
  <li><a href="#">BOUTON 1</a>
    <ul>
<li><a href="#">Titre 1</a></li>
<li><a href="#">Titre 2</a></li>
    </ul></li>
<li><a href="#">BOUTON 2</a>
    <ul>
<li><a href="#">Titre 1</a></li>
<li><a href="#">Titre 2</a></li>
    </ul></li>
  </li>
  <li><a href="#">BOUTON 3</a>
    <ul>
<li><a href="#">Titre 1</a></li>
<li><a href="#">Titre 2</a></li>
    </ul></li>
  <li><a href="#">BOUTON 4</a>
	<ul>
    	<li class="toggleSubMenu"><span>SOUS MENU 1</span>
		      <ul class="subMenu">
		        <li><a href='#'>Titre 1</a></li>
		</ul></li>
  </ul></li>
</ul>

CSS

#menu .container {
width : 1024px;
font-weight : normal; 
font-size : 16px; 
z-index: 9999;
}
#menu ul {
 font-family: 'arial'; 
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 }
#menu li {
 float:left;
 margin:auto;
 padding:0;
 width:239px;
 background-color:#2D2D32;
 margin :0 15px 0 0;
 }
#menu li a {
 display:block;
 color:#cccccc;
 text-decoration:none;
 padding:5px;

 }
#menu li a:hover {
 color:#2D2D32;
 background-color: #cccccc;
 }
#menu ul li ul {
 display:none;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
.menu a,.menu span {
  display: block;
  padding: 4px 10px;
  color: #cccccc;
  text-decoration: none;
  background: #2D2D32;
}
.menu a:hover, .menu a:focus, .menu a:active {
  background: #cccccc;
  color: #2D2D32;
}
.menu .subMenu {
  background: #65234e;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #666;
}
.menu ul.subMenu a {
  padding: 3px 10px;
  color: #cccccc;
}

Et ça… ne fonctionne pas
Et je ne parviens pas à comprendre si cela vient de cette architecture HTML/CSS (je commence et tâtonne, hein ), ou si c'est le JS qui a besoin d'être modifié (et de quelle façon).

Et aussi, petite question subsidiaire : est-il possible d'afficher une scroll-bar (verticale, en l'occurrence) sur un menu en accordéon ? (car lorsque les sous-menus seront ouverts, la liste va dépasser la hauteur que je lui ai allouée)

Grand grand merci par avance à quiconque prendra le temps de me filer un coup de main !

Salut Owl,

Je n'ai pas retouché ton CSS.

Concernant le code HTML, je l'ai un peu transformé :

<div id="menu"> <!-- On peux remplacer la balise div par une balise nav -->
  <ul>
    <li><a href="#">BOUTON 1</a>
      <ul>
	<li><a href="#">Titre 1</a></li>
	<li><a href="#">Titre 2</a></li>
      </ul>
    </li>
    <li><a href="#">BOUTON 2</a>
      <ul>
	<li><a href="#">Titre 1</a></li>
	<li><a href="#">Titre 2</a></li>
      </ul>
    </li>

<!-- </li> -- Ne correspond pas à une balise ouvrante-->

    <li><a href="#">BOUTON 3</a>
      <ul>
	<li><a href="#">Titre 1</a></li>
	<li><a href="#">Titre 2</a></li>
      </ul>
    </li>


<!-- rajout de menu accordéon -->
    <li><a href="#">BOUTON 4</a>
      <ul>
	<li class="toggleSubMenu"><span>SOUS MENU 1</span>
	  <ul class="subMenu">
	    <li><a href='#'>Titre 1</a></li>
	    <li><a href='#'>Titre 2</a></li>
	    <li><a href='#'>Titre 3</a></li>
	  </ul>
	</li>
      </ul>

      <ul>
	<li class="toggleSubMenu"><span>SOUS MENU 2</span>
	  <ul class="subMenu">
	    <li><a href='#'>Titre 1</a></li>
	    <li><a href='#'>Titre 2</a></li>
	    <li><a href='#'>Titre 3</a></li>
	  </ul>
	</li>
      </ul>

      <ul>
	<li class="toggleSubMenu"><span>SOUS MENU 3</span>
	  <ul class="subMenu">
	    <li><a href='#'>Titre 1</a></li>
	    <li><a href='#'>Titre 2</a></li>
	    <li><a href='#'>Titre 3</a></li>
	  </ul>
	</li>
      </ul>
    </li> <!-- Fin du menu accordéon -->
  
  </ul> <!-- Fin du menu->
</div>

Pour la partie javascript, je te le remets (code trouvé ici merci Alsacréations) :

$(document).ready( function () {
  $('#menu ul.subMenu').hide();
  
  $("#menu li.toggleSubMenu span").each( function () {
    var TexteSpan = $(this).text();
    $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
  } ) ;

  $("#menu li.toggleSubMenu > a").click( function () {
    if ($(this).next("ul.subMenu:visible").length != 0) {
      $(this).next("ul.subMenu").slideUp("normal");
    }
    else {
      $("#menu ul.subMenu").slideUp("normal");
      $(this).next("ul.subMenu").slideDown("normal");
    }
    return false;
  });    
})

J'espère avoir pu t'aider ...

Concernant les ascenseurs, je ne vois pas trop de quoi tu veux parler, désolé.
Modifié par Morifen (22 May 2012 - 08:55)

Merci beaucoup Morifen !
Ne sais pas ce que j'avais trafiqué, une erreur dans le html, ou bien dans le copié-collé du javascript… Toujours est-il qu'en recopiant ton code, ça fonctionne

Pour les ascenseurs, je devrais réussir à me débrouiller (en fait, je souhaiterais que lorsque la liste dépasse 500 px de hauteur, une scroll-bar verticale s'affiche automatiquement. Quand les sous menus seront fermés, pas de scroll nécessaire, mais quand ils seront ouverts, il en faudra un. Peut-être qu'avec un simple overflow: auto dans le CSS suffira ? Je vais trouver )

Merci merci pour le déblocage !