Menu vertical tres simple d'utilisation

0/5 (8 avis)

Snippet vu 22 068 fois - Téléchargée 30 fois

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

Ajouter un commentaire Commentaires
badmike95 Messages postés 45 Date d'inscription vendredi 18 novembre 2005 Statut Membre Dernière intervention 20 mai 2012
8 mai 2006 à 11:00
hmm, ton code m'aurai été parfait si il marchait sur Mozilla...dommage
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
23 juil. 2005 à 01:00
je suis loin d'être un pro...
cs_tidave Messages postés 18 Date d'inscription dimanche 31 octobre 2004 Statut Membre Dernière intervention 16 juin 2009
22 juil. 2005 à 20:48
ok pas de prob,
c'est que je vois effectivement que mon code est tres simple et pas assez ok , meme si l'utilisation que j'en fais me satisfais , je ne voulais pas parasiter le site avec un script inutile ...
J'ai commencé a modifier le code , effectivement il fonctionne bien mais n'est pas tres parametrable ..( je rappelle que je ne suis q'un petit debutant )

A plus les pros....
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
22 juil. 2005 à 14:33
franchement, à mon avis, tu devrais plutôt la modifier, on manque de menu OO... je vais en poster un horizontale (à onglets) et il en faudrait un vertical...
Si j'ai pas noté, c'était pour noter ta future mise à jour...
BruNews Messages postés 21041 Date d'inscription jeudi 23 janvier 2003 Statut Modérateur Dernière intervention 21 août 2019
22 juil. 2005 à 14:20
L'auteur d'une source peut demander à tout moment la suppression d'une source ou d'un message forum.
- Soit par menu: Contact->Contacter les admin.
- Soit tu me le passes direct em MP.
SVP, dans tous les cas donner URL exacte où intervenir.

J'attends donc la demande.
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)