Menu vertical tres simple d'utilisation

0/5 (8 avis)

Snippet vu 21 903 fois - Téléchargée 30 fois

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
41
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
41
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
26
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.

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.