MENU VERTICAL avec ouverture/fermeture des sous menus

Je suis enfin arrivé à faire ce satané menu en javascript. Je le trouve pratique car il permet de ne pas recouvrir la page avec les sous titres d'un menu horizontal au rollover et il offre un bon gain de place en vertical. il n'y a plus qu'à mettre les adresses et à personnaliser les feuilles de styles.

Citation :: <html>
<head>
<title></title>
<style type="text/css">
#boite{
position:absolute;
width:120;
height:20;
top:50;
left:130;
border-style:solid;
border-width:2;
border-color:#05193c;
overflow:hidden;
}
#cache1{

width:100;
border-color:red;
overflow:hidden;
}
#sm1{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:blue;
overflow:hidden;
}
#cache2{

width:100;
border-color:pink;
overflow:hidden;
}
#sm2{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:green;
overflow:hidden;
}
#cache3{

width:100;
border-color:pink;
overflow:hidden;
}
#sm3{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:green;
overflow:hidden;
}
#cache4{

width:100;
border-color:pink;
overflow:hidden;
}
#sm4{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:green;
overflow:hidden;
}
#cache5{

width:100;
border-color:pink;
overflow:hidden;
}
#sm5{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:green;
overflow:hidden;
}
#cache6{

width:100;
border-color:pink;
overflow:hidden;
}
#sm6{
position:absolute;
top:15;
margin-left:10;
width:100;
border-color:green;
overflow:hidden;
}
a{
text-decoration: none;
color:#CC977C;
font-size:13;
}
a:hover{
color:#CCCC7C;
font-size:14;
}
</style>
<script language="javascript">
i=1;
function voir(identifiant){
//alert(identifiant);
switch(identifiant){
case "boite":
document.getElementById(identifiant).style.height=300;
break;
case "cache1":
document.getElementById(identifiant).style.height=60;
break;
case "cache2":
document.getElementById(identifiant).style.height=60;
break;
case "cache3":
document.getElementById(identifiant).style.height=60;
break;
case "cache4":
document.getElementById(identifiant).style.height=60;
break;
case "cache5":
document.getElementById(identifiant).style.height=60;
break;
case "cache6":
document.getElementById(identifiant).style.height=60;
break;
}

}

function cacher(identifiant){
switch(identifiant){
case "boite":
document.getElementById(identifiant).style.height=20;
break;

case "cache1":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm1").style.height=0;
break;

case "cache2":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm2").style.height=0;
break;

case "cache3":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm3").style.height=0;
break;

case "cache4":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm4").style.height=0;
break;

case "cache5":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm5").style.height=0;
break;

case "cache6":
document.getElementById(identifiant).style.height=0;
document.getElementById("sm6").style.height=0;
break;
}
}

</script>
</head>
<body>
<div id="boite" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<div id="cache1" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">ACCUEIL</a><br />
<div id="sm1">
<a href="#">anglais</a><br />
<a href="#">français</a><br />
<a href="#">espagnol</a><br />
</div>
</div>
<div id="cache2" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">HISTORIQUE</a><br />
<div id="sm2">
<a href="#">prehistoire</a><br />
<a href="#">antiquité</a><br />
<a href="#">renaissance</a><br />
</div>
</div>
<div id="cache3" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">REFERENCE</a><br />
<div id="sm3">
<a href="#">telerama</a><br />
<a href="#">les inrocks</a><br />
<a href="#">nova</a><br />
</div>
</div>
<div id="cache4" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">FORUM</a><br />
<div id="sm4">
<a href="#">debutant</a><br />
<a href="#">intermediaire</a><br />
<a href="#">confirmé</a><br />
</div>
</div>
<div id="cache5" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">RESSOURCES</a><br />
<div id="sm5">
<a href="#">javascript</a><br />
<a href="#">php</a><br />
<a href="#">actionscipt</a><br />
</div>
</div>
<div id="cache6" onmouseover="voir(this.id)" onmouseout="cacher(this.id)">
<a href="#">DOWNLOAD</a><br />
<div id="sm6">
<a href="#">audio</a><br />
<a href="#">video</a><br />
<a href="#">logiciels</a><br />
</div>
</div>
</div>
</body>

</html>

Admin Nombre de messages : 117 Date d'inscription : 02/02/2007

fichtre...!...bien joué!

finalement on a trouvé qui va aider Brice pendant les 4semaines du projet Very Happy

chapeau en tout cas. MENU VERTICAL avec ouverture/fermeture des sous menus 0014

et bin ! y en a qui chome pas !! bravo Polo , t es le meilleur........................heu...j ai dis ca a voix haute?

THQ Nombre de messages : 68 Age : 46 Date d'inscription : 03/02/2007

Rien à dire t'es le meilleur ! Impressionnant

» MENUS
» logiciel pour faire des menus en Flash
» encore un menu...
» Vous me tuez avec votre travail