Menu vertical tres simple d'utilisation

Commenter

Contenu du snippet

salut a tous ; en fait ce script est l'amelioration (je pense) d'un code vu sur ce site en 2003

C'est un menu tres parametrable en fait , c'est un jeu d'enfant.........

Pour les critiques , n'hesitez pas , car je suis débutant.....

Source / Exemple : 


<div id="Layer1" style="position:absolute; width:158px; height:359px; z-index:1; top: 47px; left: 357px;">

<SCRIPT language=JScript> 

// developpé par Bergina David pour www.guadadvent.org
    function ShowHide(Div) { 
     Div.style.display='InLine'; 
    } 
   
   
 function ShowHides(Div) { 
     Div.style.display='none'; 
    }
  
  function StartTimer(delai) {setTimeout("ShowHides(menu1)",delai*1000);}
  
  function StartTimer2(delai) {setTimeout("ShowHides(menu2)",delai*1000);}
  
  function StartTimer3(delai) {setTimeout("ShowHides(menu3)",delai*1000);}
  
  
  </script>

<table style="border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC" bordercolordark="white" bordercolorlight="black"> 
    <tr> 
        <td width="150"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0;"><a href="#"   OnMouseOver="javascript: ShowHide(menu1); javascript: ShowHides(menu2);javascript: ShowHides(menu3);" OnMouseOut="javascript: StartTimer(10);">Etudes Biblique</p></a>
			 
        </td> 
    </tr> 
</table> 
  
<DIV id='menu1' style=display=none;>

<table style="line-height:100%; margin-top:0; margin-bottom:0; border-top-width:1px; border-right-width:1px; border-bottom-width:0px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:solid; border-right-style:solid; border-bottom-style:none; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#F9F9F9"> 
    <tr>
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
           <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 1</p> 
        </td> 
    </tr> 
    <tr> 
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 2</p>
        </td> 
    </tr> 
    <tr> 
        <td width="150"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 3</p> 
        </td>
    </tr> 
</table> 
  
</div> 
  
<table style="border-width:1px; border-color:rgb(153,153,153); border-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC" bordercolordark="white" bordercolorlight="black"> 
    <tr> 
        <td width="150"><p style="line-height:100%; margin-top:0; margin-bottom:0;"><a href="#"  OnMouseOver="javascript: ShowHide(menu2); javascript: ShowHides(menu1);javascript: ShowHides(menu3);" OnMouseOut="javascript: StartTimer2(10);">Ressources Gratuites</a></p> 
      </td> 
    </tr> 
</table> 
  
<DIV id='menu2' style=display=none;> 
  
 <table style="line-height:100%; margin-top:0; margin-bottom:0; border-top-width:0px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#F9F9F9"> 
    <tr> 
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 1</p> 
        </td> 
    </tr> 
    <tr> 
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 2</p> 
        </td> 
    </tr> 
    <tr> 
        <td width="150"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 3</p> 
        </td> 
    </tr> 
</table> 
  
</div> 
  
<table style="border-top-width:0px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#CCCCCC" bordercolordark="white" bordercolorlight="black"> 
    <tr> 
        <td width="150"><p style="line-height:100%; margin-top:0; margin-bottom:0;"><a href="#"  OnMouseOver="javascript: ShowHide(menu3); javascript: ShowHides(menu1);javascript: ShowHides(menu2);" OnMouseOut="javascript: StartTimer3(10);">menu 3</a></p> 
      </td> 
    </tr> 
</table> 
  
<DIV id='menu3' style=display=none;> 
  
<table style="line-height:100%; margin-top:0; margin-bottom:0; border-top-width:0px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-color:rgb(153,153,153); border-top-style:none; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;" cellpadding="5" cellspacing="0" bgcolor="#F9F9F9"> 
    <tr> 
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 1</p> 
        </td> 
    </tr> 
    <tr> 
        <td width="150" style="border-bottom-width:1px; border-bottom-color:rgb(153,153,153); border-bottom-style:solid;"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 2</p> 
        </td> 
    </tr> 
    <tr> 
        <td width="150"> 
            <p style="line-height:100%; margin-top:0; margin-bottom:0; margin-left:20;">sous menu 3</p> 
        </td> 
    </tr> 
</table> 
  
</div> 

</div>

Conclusion :


Voila

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_tidave)