11540 sujets

JavaScript, DOM et API Web HTML5

Sous-sous menu accordeon en jquery : possible?

Bonjour à tous.

Je me suis servi du Tutorial Créer un menu déroulant “accordéon” avec jQuery et malgré quelques souci encore sous CSS (transparence du fond, changement du point des sous menus) en cours de solution je pense, j'essaye maintenant de trouver une solution pour générer un autre sous menu à un premier sous menu déjà.

Exemple tiré du Tutorial et dont je souhaiterais arriver:

*Aller à la page 1:
- aller à la page 1.1
- aller à la page 1.1.1
- aller à la page 1.1.2
- aller à la page 1.2
- aller à la page 1.2.1
- aller à la page 1.2.2
*Aller à la page 2
- aller à la page 2.1
- aller à la page 2.2

Est ce possible tout en concernant l'aspect accordéon géré par jquery?

la base html :
<ul class="navigation">
  <li><a href="#" title="Aller à la page 1">Page 1</a></li>
  <li class="toggleSubMenu"><span>Page 2</span>
    <ul class="subMenu">
      <li><a href="#" title="Aller à la page 2.1">Page 2.1</a></li>
      <li><a href="#" title="Aller à la page 2.2">Page 2.2</a></li>
      <li><a href="#" title="Aller à la page 2.3">Page 2.3</a></li>
    </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
      <ul class="subMenu">
        <li><a href="#" title="Aller à la page 3.1">Page 3.1</a></li>
        <li><a href="#" title="Aller à la page 3.2">Page 3.2</a></li>
      </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Page 4</a></li>
</ul>


Merci par avance
En regardant la source Alsa creation, on voit que le script s'applique sur des class (.navigation sur le premier ul, .toggleSubMenu sur les li qui suivent et subMenu sur le ul suivant), il est donc tout à fait possible soit d'attribuer ces mêmes class aux balises ul et li de ton sous menu.

Ou bien de faire une copie du script avec des class différentes auxquelles tu pourra appliquer un traitement et/ou un style différent.

Ca donnerait un truc dans ce style, à tester :


<ul class="navigation">
	<li class="toggleSubMenu"><span>Page 1</span> <!-- lien premier niveau -->
		<ul class="subMenu"> <!-- contenu lien premier niveau -->
			<li>
			
				<ul class="navigation">
					<li class="toggleSubMenu"><span>Page 1.1</span> <!-- lien second niveau -->
						<ul class="subMenu"> <!-- contenu lien second niveau -->
							<li>lien vers contenu de la rubrique ciblée par le menu</li>
						</ul>
					</li>
				</ul>
				
			</li>
		</ul>
	</li>
</ul>

Modifié par Klesk (23 Oct 2012 - 12:30)
Klesk a écrit :
En regardant la source Alsa creation, on voit que le script s'applique sur des class (.navigation sur le premier ul, .toggleSubMenu sur les li qui suivent et subMenu sur le ul suivant), il est donc tout à fait possible soit d'attribuer ces mêmes class aux balises ul et li de ton sous menu.

Ou bien de faire une copie du script avec des class différentes auxquelles tu pourra appliquer un traitement et/ou un style différent.



Ok, donc, ca reste possible. Le plus dur (pour moi) étant de trouver comment appliquer tout ca....:)

j'ai testé son bout de code, et je n'ai que les deux premières partie, le deuxième sous menu n'apparait pas et ferme le premier.
Modifié par brolysan (23 Oct 2012 - 12:42)
Klesk a écrit :
Tu as une page ou on peut voir ça ?



Oui, je la mets en ligne de suite.

Page de test : page de test

j'ai mis en dessous un début d'un autre code glané sur le net mais la partie accordéon ne se déclenche pas.
Modifié par brolysan (23 Oct 2012 - 13:42)
Sujet clos
Aller à