Bonjour à tous,

je suis un débutant partant d'en dessous du niveau de la mer et pour l'instant j'avais réussi à me débrouiller seul mais là ca devient galère.
Les faits : j'ai un menu vertical qui est bcp trop long et je voudrais que le menu devienne déroulant (comme l'excellent exemple donné sur ce site). Mais je ne sais pas à quel endroit insérer onmouseover.
Ci dessous le script de mon menu vertical

<link href="css/summer.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style6 {font-size: 16px}
.Style7 {font-weight: bold; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; color: #FF0033;}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>

<div id="menuVertDiv">
  <div id="menuVert">
    <div align="center">
      <p>&nbsp;</p>
      <p><a href="opeco.pdf" target="_blank" onmouseover="MM_swapImage('','','images/affaires &agrave; faire.gif',1)" onmouseout="MM_swapImgRestore('','','images/OPECO.gif',1)"><img src="images/opeco.gif" alt="Consulter les Op&eacute;rations Commerciales en cours" width="136" height="139" border="0" /></a><br />
        <br />
      </p>
    </div>
    <ul><li class="titreMenu"><?php echo $TitreMenu; ?></li>
		  [#green]<[#red]li class="titre"><?php echo $Categorie1; ?></li>
		  <?php while ($textile = mysql_fetch_array ($reqCat1)) {
						extract ($textile);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";						} ?>
		  <li class="titre"><?php echo $Categorie2; ?></li>
		  <?php while ($materiel = mysql_fetch_array ($reqCat2)) {
						extract ($materiel);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		  <li class="titre"><?php echo $Categorie3; ?></li>
		  <?php while ($accessoires = mysql_fetch_array ($reqCat3)) {
						extract ($accessoires);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		  <li class="titre"><?php echo $Categorie4; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat4)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie5; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat5)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie6; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat6)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie7; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat7)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie8; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat8)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie9; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat9)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie10; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat10)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>
		<li class="titre"><?php echo $Categorie11; ?></li>
		  <?php while ($chaussants = mysql_fetch_array ($reqCat11)) {
						extract ($chaussants);
						echo "<li><a class=\"linkList\" href=\"famillesProduits.php?univers=$universCategorie&categorie=$nomCategorie\">".$nomCategorie."</a></li>\n";
				} ?>												
	</ul>
            <p class="h1">&nbsp;</p>
            <p class="h1">&nbsp;</p>
    <li class="titreMenu"><a href="brandlink.php">Cliquez ici pour mieux conna&icirc;tre les  Marques
      </p>
  distribu&eacute;es par Sport Dispo</a></div>
</div>

[/#][/i]

Modifié par tango72 (12 Sep 2006 - 19:28)
Bonjour,

Je te mets ici un autre menu déroulant à plusieurs touches de menu et sous menus.
Tu juges toi-même.

<HTML> 
<HEAD> 
<STYLE TYPE="text/css"> 
<!-- 
.menuhaut{ background: #CCCCCC;height: 0px;width: 120px;border: 0px outset #FFCC00;} 
.menubasnivo2{ background: #FFFFFF;border: 0px inset #000000;} 
.menubasnivo3{ background: #FFFF00;border: 0px inset #000000;} 
.menubasnivo4{ background: #FF00FF;border: 0px inset #000000;} 
.menubas{display="none"} 

a{ font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #0066FF;} 
a:link{ text-decoration: none;} 
a:visited{ text-decoration: none;color: #0066FF;} 
a:hover{ text-decoration: none;color: #00CCFF;} 
a:active{ text-decoration: none;color: #0066FF;} 
--> 
</STYLE> 
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> 
var OldIDEE=""; 
var OldCountSousMenu=0; 

function ActionMenu(IDEE,CountSousMenu){ 
    if((IDEE.substr(0,1) != OldIDEE.substr(0,1)) && (OldIDEE!="")){ 
        ReInitUnMenu(); 
        OldIDEE=""; 
        OldCountSousMenu=0; 
    } 
    if(IDEE.length>OldIDEE.length){ //Down 
        if(IDEE.length>1){ 
            CacherMenu(IDEE,CountSousMenu,IDEE); 
        } 
        AfficherMenu(IDEE,CountSousMenu); 
    } 
    if(IDEE.length<OldIDEE.length){ //UP 
        CacherMenu(OldIDEE,OldCountSousMenu); 
        CacherMenu(IDEE,CountSousMenu,IDEE); 
    } 
    if(IDEE.substr(0,IDEE.length) == OldIDEE.substr(0,OldIDEE.length)){ //Afficher/Cacher 
        var AfficherCacher="none"; 
        for(i=0;i<CountSousMenu;i++){ 
            var tr = document.getElementById("menu"+IDEE+"_"+(i+1)); 
            if(tr.style.display=="none"){ 
                AfficherCacher="block";     
            } 
        } 
        for(i=0;i<CountSousMenu;i++){ 
            var tr = document.getElementById("menu"+IDEE+"_"+(i+1)); 
            tr.style.display=AfficherCacher; 
        } 
    } 
    OldIDEE=IDEE; 
    OldCountSousMenu=CountSousMenu; 
} 
function ReInitUnMenu(){ 
    for(i=0;i<OldCountSousMenu;i++){     
        var tr = document.getElementById("menu"+OldIDEE+"_"+(i+1)); 
        tr.style.display ="none"; 
    } 
    var OldIDEEtemp = OldIDEE; 
    while(OldIDEEtemp.length>1){ 
        var tr = document.getElementById("menu"+OldIDEEtemp); 
        tr.style.display ="none"; 
        OldIDEEtemp = OldIDEEtemp.substr(0,OldIDEEtemp.length-2); 
    } 
}         
function CacherMenu(IDEE,CountSousMenu,IDEEexclus){ 
    var IDEEtemp = IDEE.substr(0,IDEE.length-2); 
    for(i=0;i<CountSousMenu;i++){     
        var tr = document.getElementById("menu"+IDEEtemp+"_"+(i+1)); 
        if(IDEEexclus!=null){ //prend en compte l'exclusion 
            if(IDEEexclus!=(IDEEtemp+"_"+(i+1))){ 
                tr.style.display ="none"; 
            } 
        }else{ 
            tr.style.display ="none"; 
        } 
    } 
} 
function AfficherMenu(IDEE,CountSousMenu){ 
    for(i=0;i<CountSousMenu;i++){ 
        var tr = document.getElementById("menu"+IDEE+"_"+(i+1)); 
        tr.style.display ="block"; 
    } 
} 

             
     
//window.onload = function () { 
//definirDisplayNivo(); 
//} 
</SCRIPT> 
<TITLE>test menu</TITLE> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD>
<body> 
<TABLE BORDER="0" cellpadding="0" cellspacing="0" bgcolor="#0000CC"> 
    <TR><TD CLASS="menuhaut"><A HREF='#' onClick='ActionMenu("1",2);'>rubrique1</A></TD></TR> 
        <TR ID="menu1_1" CLASS="menubas" ><TD CLASS="menubasnivo2"><A HREF='#'>rubrique1_1</A></TD></TR> 
        <TR ID="menu1_2" CLASS="menubas" ><TD CLASS="menubasnivo2"><A HREF='#'>rubrique1_2</A></TD></TR> 
    <TR><TD CLASS="menuhaut"><A HREF='#' onClick='ActionMenu("2",3);'>rubrique2</A></TD></TR> 
        <TR ID="menu2_1" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#'>rubrique2_1</A></td></TR> 
        <TR ID="menu2_2" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#'>rubrique2_2</A></td></TR> 
        <TR ID="menu2_3" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#'>rubrique2_3</A></TD></TR> 
    <TR><TD CLASS="menuhaut"><A HREF='#' onClick='ActionMenu("3",3);'>rubrique3</A></TD></TR> 
        <TR ID="menu3_1" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#'>rubrique3_1</A></TD></TR> 
        <TR ID="menu3_2" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#' onClick='ActionMenu("3_2",3);'>rubrique3_2</A></TD></TR> 
            <TR ID="menu3_2_1" CLASS="menubas"><TD CLASS="menubasnivo3"><A HREF='#'>rubrique3_2_1</A></TD></TR> 
            <TR ID="menu3_2_2" CLASS="menubas"><TD CLASS="menubasnivo3"><A HREF='#' onClick='ActionMenu("3_2_2",3);'>rubrique3_2_2</A></TD></TR> 
                <TR ID="menu3_2_2_1" CLASS="menubas"><TD CLASS="menubasnivo4"><A HREF='#'>rubrique3_2_2_1</A></TD></TR> 
                <TR ID="menu3_2_2_2" CLASS="menubas"><TD CLASS="menubasnivo4"><A HREF='#'>rubrique3_2_2_2</A></TD></TR> 
                <TR ID="menu3_2_2_3" CLASS="menubas"><TD CLASS="menubasnivo4"><A HREF='#'>rubrique3_2_2_3</A></TD></TR> 
            <TR ID="menu3_2_3" CLASS="menubas"><TD CLASS="menubasnivo3"><A HREF='#'>rubrique3_2_3</A></TD></TR> 
    <TR ID="menu3_3" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#'>rubrique3_3</A></TD></TR> 
<TD CLASS="menuhaut"><A HREF='#' onClick='ActionMenu("4",1);'>rubrique4</A></TD> 
        <TR ID="menu4_1" CLASS="menubas"><TD CLASS="menubasnivo2"><A HREF='#' onClick='ActionMenu("4_1",1);'>rubrique4_1</A></TD></TR> 
            <TR ID="menu4_1_1" CLASS="menubas"><TD CLASS="menubasnivo3"><A HREF='#'>rubrique4_1_1</A></TD></TR> 
</TABLE> 
</BODY></HTML>
Merci Deny t'es un chef !!!
ça me semble très bien. Je vais essayer de faire une combinaison des 2 scripts.

ciao