Bonjour !

Je préviens de suite, je ne suis pas bon codeur JS mais j'ai de bonnes bases en programmation en général ! Voilà qui est dit

Je vous explique mon problème :
J'ai un menu à onglets (tout marche nikel, CSS codé et tout). Ce que je voudrais, c'est que au click sur un onglet, un sous menu s'affiche en dessous. Et disparaisse, quand on clique sur un autre onglet ou celui ci même.

J'ai fais des recherches sur le net, ça m'a aidé c'est sur mais trop flou pour moi encore.
Voilà un petit aperçu de ce que j'ai !



Et mon code : (Les sous-menu) sont cachés par un display:none;

<nav role="navigation">
	<ul>
		<li class="selected"><a href="#">Accueil</a></li>
		<li><span>Menu 1</span></li>
		<li><a href="#">Forum</a></li>
		<li><span>Menu 2</span></li>
	</ul>
</nav>
<div class="content" role="main">
	<ul id="sousMenu1">
		<li>Lien 1.1</li>
		<li>Lien 1.2</li>
		<li>Lien 1.3</li>
	</ul>
	<ul id="sousMenu2">
		<li>Lien 2.1</li>
		<li>Lien 2.2</li>
		<li>Lien 2.3</li>
	</ul>

Si vous pouviez me donnez quelques pistes par où commencer ça m'aiderais énormément !

Merci d'avance !

Salut,
Tu devrais trouver dans ce tuto de quoi faire : http://www.siteduzero.com/tutoriel-3-8 [...] vascript.html

Tente quelque chose, et n'hésite pas à revenir si tu rencontre des soucis (et tu en rencontreras )

Merci, j'ai trouver ma lecture pour ce soir

J'ai une petite idée qui me venait ! Sachant que la liste du sous-menu n'est pas imbriqué dans le menu respectif...
Est-ce qu'il serait mieux de faire ceci : <li><a onClick="afficheSousMenu("id du sous menu");">Menu 2</span></a>

Que j'ai des bases pour commencer mon script surtout ce que je veux

Mais le onClick est-il toujours valide sous HTML5 ? Si non, par quoi je devrai le remplacé ?

HTML5 est moins rigoureux que XHTML. Donc en gros ce qui est valide XHTML est valide HTML5. On préfère quand même mettre les attributs en minuscules, même si c'est valide HTML5 (onclick et non onClick).

Ici ton code ne peut pas marcher car tu met ton id dans des guillemets doubles sans les échapper. Ceci est mieux :

<a onclick="afficheSousMenu('id du sous menu');">


Bon ensuite les attributs onclick, ça met du js au milieu du html et sa oblige à faire des fonctions globales. Mais pour débuter c'est bien.

Bon, j'ai réussi ce que je voulais !
Le tout en JQuery, que je trouve plus simple au passage.

$(document).ready( function () {
	$("#sousMenus ul").hide();
	$("#ongletNews").click(function(){
		if($("#sousMenus ul#sousMenuNews").css("display") != "none")
		{
			$("#sousMenus ul").hide();
		}else{
			$("#sousMenus ul").hide();
			$("#sousMenus ul#sousMenuNews").show();
		}
	});
	
	$("#ongletMenu2").click(function(){
		if($("#sousMenus ul#sousMenu2").css("display") != "none")
		{
			$("#sousMenus ul").hide();
		}else{
			$("#sousMenus ul").hide();
			$("#sousMenus ul#sousMenu2").show();
		}
	});
});

Si vous avez une suggestion à me faire, n'hésitez pas

tu peux utiliser .visible() ;).