28173 sujets

CSS et mise en forme, CSS3

[Résolu] Petit menu simple

Bonjour,
je cherche à réaliser cet effet :

[Menu]
[sous menu 1]
[sous menu 2]
[sous menu 3]

que Smiley menu soit un lien sur lequel on clic et qui fait apparaitre les sous menu, (caché au départ) si on reclic sur [Menu] les sous menu sont de nouveau caché, tout ca sans rechargement de la page.

je ne veux pas qu'un div englobe le menu et les sous menu car je souhaite utiliser des style différents pour le titre [Menu] et chaque [sous menu]

Voici le code le plus proche que j'ai pu trouver :


<html>
<head>
<title>Menu</title>

<script type="text/javascript">

/* Montre / Cache un div */

function DivStatus( nom, numero )
	{
	var divID = nom + numero;
	if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
		{ Pdiv = document.getElementById( divID ); PcH = true; }

	else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
		{ Pdiv = document.all[ divID ]; PcH = true; }

	else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
		{ Pdiv = document.layers[ divID ]; PcH = true; }

	else
		{ PcH = false; }

	if ( PcH )
		{ Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv'; }
	}
		
/* Cache tous les divs ayant le même préfixe */

function CacheTout( nom )
	{	
	var NumDiv = 1;
	if ( document.getElementById ) // Pour les navigateurs récents
		{
		while ( document.getElementById( nom + NumDiv) )
			{
			SetDiv = document.getElementById( nom + NumDiv );
			if ( SetDiv && SetDiv.className != 'cachediv' )
				{ DivStatus( nom, NumDiv ); }
			NumDiv++;
			}

		}
	else if ( document.all ) // Pour les veilles versions
		{
		while ( document.all[ nom + NumDiv ] )
			{
			SetDiv = document.all[ nom + NumDiv ];
			if ( SetDiv && SetDiv.className != 'cachediv' )
				{ DivStatus( nom, NumDiv ); }
			NumDiv++;
			}
		}

	else if ( document.layers ) // Pour les très veilles versions
		{
		while ( document.layers[ nom + NumDiv ] )
			{
			SetDiv = document.layers[ nom + NumDiv ];
			if ( SetDiv && SetDiv.className != 'cachediv' )
				{ DivStatus( nom, NumDiv ); }
			NumDiv++;
			}
		}
	}

/* Montre tous les divs ayant le même préfixe */

function MontreTout( nom )
	{	
	var NumDiv = 1;
	if ( document.getElementById ) // Pour les navigateurs récents
		{
		while ( document.getElementById( nom + NumDiv) )
			{
			SetDiv = document.getElementById( nom + NumDiv );
			if ( SetDiv && SetDiv.className != '' )
				{ DivStatus( nom, NumDiv ); }
			NumDiv++;
			}
		}

	else if ( document.all ) // Pour les veilles versions
		{
		while ( document.all[ nom + NumDiv ] )
			{
			SetDiv = document.all[ nom + NumDiv ];
			if ( SetDiv && SetDiv.className != '' )
				{ DivStatus( nom, NumDiv ); }
				NumDiv++;
				}
			}

	else if ( document.layers ) // Pour les très veilles versions
		{
		while ( document.layers[ nom + NumDiv ] )
			{
			SetDiv = document.layers[ nom + NumDiv ];
			if ( SetDiv && SetDiv.className != '' )
				{ DivStatus( nom, NumDiv ); }
				NumDiv++;
				}
			}
	}

/* Inverse les divs: Cache les divs visible et montre le divs cachés [smile] */

function InverseTout( nom )
	{	
	var NumDiv = 1;
	if ( document.getElementById ) // Pour les navigateurs récents
		{
		while ( document.getElementById( nom + NumDiv ) )
			{
			SetDiv = document.getElementById( nom + NumDiv );
			DivStatus( nom, NumDiv );
			NumDiv++;
			}
		}

	else if ( document.all ) // Pour les veilles versions
		{
		while ( document.all[ nom + NumDiv ] )
			{
			SetDiv = document.all[ nom + NumDiv ];
			DivStatus( nom, NumDiv );
			NumDiv++;
			}
		}

	else if ( document.layers ) // Pour les très veilles versions
		{
		while ( document.layers[ nom + NumDiv ] )
			{
			SetDiv = document.layers[ nom + NumDiv ];
			DivStatus( nom, NumDiv );
			NumDiv++;
			}
		}
	}

</script>

<style type="text/css">
.cachediv {
	visibility: hidden;
	overflow: hidden;
	height: 1px;
	margin-top: -1px;
	position: absolute;
	}

.unnamed1 {
	background-color: #000066;
	cursor: hand;
	text-decoration: underline;
	text-align: center;
	}
</style>

</head>

<body>

<div name="menu1" id="menu1" >


<div name="menu11" id="menu11">
  <div class="unnamed1"  onClick="javascript:DivStatus( 'menu', '111' )" style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;"><em>Menu 
    1.1</em></div>
  <div name="menu111" id="menu111">
    <div class="unnamed1" style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;"><a href="url1.1.1">Lien 1.1.1 </a><br>
      <a href="url1.1.2">Lien 1.1.2</a><br>
      <a href="url1.1.3">Lien 1.1.3</a></div>
  </div>
  <div class="unnamed1"  onClick="javascript:DivStatus( 'menu', '121' )" style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;" ><em>Menu 
    1.2</em></div>
  <div name="menu121" id="menu121">
    <div class="unnamed1" style="border: 1px solid black; background-color: whitesmoke; margin-bottom: 2px;"><a href="url1.2.1">Lien 1.2.1 </a><br>
      <a href="url1.2.2">Lien 1.2.2</a><br>
      <a href="url1.2.3">Lien 1.2.3</a></div>
  </div></div>


</body>
</html>


quelqu'un peut m'indiquer les modifications à faire ?
Smiley biggol merci car je cherche depuis plusieurs jour et à chaque fois je plante le code. Smiley lol
Modifié par seb nantes (04 Jul 2006 - 14:43)
Foula, tu t'compliques la vie Smiley smile

Javascript : 
<script type="text/javascript">
function look(id)
{
	var show = document.getElementById(id).style ;
	show.display = show.display == 'inline' ? "none" : "inline" ;
}
</script>


xHTML :
<a href="javascript:void(look('layerX'));">Blablabla</a>
<div id="layerX" style="display: none;">
...
</div>
t'es un chef, java c'est pas mon truc!
mais parfois c'est plus simple...
(je ne comprend presque rien au partie les plus complexe de ton code)
MERCI !
Smiley biggrin
Sujet clos
Aller à