Menu déroulant

Résolu

mano2003 -

Bonjour,
je travaille sur sur un projet de site web et dans le projet il est dit qu'il faut créer des menus qui affiche des sous-menus et je sais vraiment pas comment le faire. sur google j'ai vu des codes js qui affiche les sous-menus au passage de la souris mais nous on nous demande pas ca alor svp j'ai besoin de votre aide chers amis pour ce code!! merci!

Configuration: Windows
Firefox 3.0.11

Afficher la suite

5 réponses

diice

Qu'est-ce qui marche pas exactement ??

en faisant ca comme ça ca marche chez moi :

<!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>Document sans nom</title>
<script>
function visibilite(thingId)
{
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display == "none")
	{
		targetElement.style.display = "inline";
	}
	else
	{
		targetElement.style.display = "none" ;
	}
}

</script>
</head>

<body>
<div class="menuhaut">A voir sur mon site</div>
<ul class="menu">
<li><a href="javascript:visibilite('nomDivduSousMenu1')">Rubrique</a>
<div id="nomDivduSousMenu1" style="display:none;">
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('nomDivduSousMenu2')">Rubrique</a>
<div id="nomDivduSousMenu2" style="display:none;"><ul>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('nomDivduSousMenu3')">Rubrique</a>
<div id="nomDivduSousMenu3" style="display:none;"><ul>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</div>
</li>
<li><a href="javascript:visibilite('nomDivduSousMenu4')">Rubrique</a>
<div id="nomDivduSousMenu4" style="display:none;">
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul></div>
</li>

<li><a href="javascript:visibilite('nomDivduSousMenu5')">Rubrique</a>
<div id="nomDivduSousMenu5" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

</ul></div>
</li>
<li><a href="javascript:visibilite('nomDivduSousMenu6')">Rubrique</a>
<div id="nomDivduSousMenu6" style="display:none;"><ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
</ul></div>
</li>
</ul>
 
</body>
</html>

mano2003 Auteur
voila!! ca marche parfaitement !!! un grand merci diice tu viens de me sauver la vie !!!

0

Réponse 2 / 5
mano2003 Auteur
merci diice mais ca marche toujours pas

0

diice

tu peux cacher certaines div ou li et en cliquant sur le theme les faire apparaitre en css.

avec un peu de javascript dans le <head>

function visibilite(thingId)
{
	var targetElement;
	targetElement = document.getElementById(thingId) ;
	if (targetElement.style.display == "none")
	{
		targetElement.style.display = "inline";
	}
	else
	{
		targetElement.style.display = "none" ;
	}
}

puis dans ta page :

<a href="javascript:visibilite('nomDivduSousMenu')">Titre menu</a>
<DIV id="nomDivduSousMenu" style='display:none;'>sous menu ou contenu</div>

exemple avec ton code :

<li><a href="javascript:visibilite('nomDivduSousMenu')">Rubrique</a>

<DIV id="nomDivduSousMenu" style='display:none;'>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li> 
</ul>
</div>
</li>

Réponse 4 / 5
mano2003 Auteur
voici le code de mon menu. j'ai utilisé du css mais avec ce code tout s'affiche en même temps.

<div class="menuhaut">A voir sur mon site</div>
<ul class="menu">
<li> <a href="#">Rubrique</a>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</li>
<li><a href="#">Rubrique</a>
<ul>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</li>
<li><a href="#">Rubrique</a>
<ul>

<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</li>
<li><a href="#">Rubrique</a>

<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
</ul>
</li>

<li><a href="#">Rubrique</a>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

</ul>
</li>
<li><a href="#">Rubrique</a>
<ul>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>

<li><a href="#">Lien</a></li>
</ul>
</li>
</ul>

0
Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 5
diice
on vous demande quoi exactement ?

sinon tu peux utiliser les <ul> et <li> pour tout afficher d'un coup avec menu et sous menu

0

Menu déroulant

5 réponses

Discussions similaires

Newsletters