Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

MENU VERTICAL TRES SIMPLE D'UTILISATION


Information sur la source

Catégorie :Menu & Co Classé sous : menu, vertical, simple Niveau : Débutant Date de création : 22/07/2005 Vu : 15 927

Note :
5,33 / 10 - par 3 personnes
5,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

Description

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

  • <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>
<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
 

Commentaires et avis

signaler à un administrateur
Commentaire de coucou747 le 22/07/2005 12:17:16

salut
c'est un menu assez classique comme on n'en a vu des centaines sur ce site, il n'y a pas de fonction pour créer le menu : le code html ne se place pas tt seul... il n'est pas orienté objet... Donc, dans un sens, il n'est pas aussi paramétrable que tu le dit car si je veux changer un détail dans le html, je dois changer autant de ligne que j'ai de cases dans mon menu...

sinon, tes balises html ne sont pas très très corectes : soit on met tout en minuscules (norme XML=>XHTML), soit on met tout en majuscules, mais il faut rester constant...

tu utlises des styles, mais tu pourrais utiliser des classes car la, si tu veux changer un détail...

signaler à un administrateur
Commentaire de tidave le 22/07/2005 13:25:04

Salut ,
c'est vraix tu as raison ,je vais enlever le code ;
je ne vois pas ou je peux la supprimer?

signaler à un administrateur
Commentaire de coucou747 le 22/07/2005 14:01:36

tu ne peux pas suprimer un code (même si la loi exige que tu puisse le faire...)
mais le mieux serait que tu fasse un code OO pour remplacer...

signaler à un administrateur
Commentaire de BruNews le 22/07/2005 14:20:58 administrateur CS

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.

signaler à un administrateur
Commentaire de coucou747 le 22/07/2005 14:33:22

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

signaler à un administrateur
Commentaire de tidave le 22/07/2005 20:48:43

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

signaler à un administrateur
Commentaire de coucou747 le 23/07/2005 01:00:57

je suis loin d'être un pro...

signaler à un administrateur
Commentaire de badmike95 le 08/05/2006 11:00:46

hmm, ton code m'aurai été parfait si il marchait sur Mozilla...dommage

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Menu vertical [ par Satandu67 ] Bonjour je suis nouveau et je recherche un menu vertical mais j'en trouve pas et j'en recherche un pour mon site c que le début et pour l'instant j'ai ouverture automatique d'un menu vertical [ par psycomel ] Bonjour j'ai un menu vertical. J'explique : je clique sur le titre d'une partie, celle-ci se déroule et laisse entrevoir les différrents liens qui s'y menu vertical + intégration flash [ par reyterg ] Bonjour à tous,Je cherche le moyen d'afficher un tableau sur la droite d'une page HTML. Le but est de garder le menu à la même place tout au long du s menu vertical + intégration flash [ par reyterg ] Bonjour à tous,Je cherche le moyen d'afficher un tableau sur la droite d'une page HTML. Le but est de garder le menu à la même place tout au long du s Faire une action sur le menu par un simple lien [ par ThePooh ] BonjourJe débute dans la création d'un site webJe m'expliqueDans ma page j'ai mon menu à gauche et au milieu page avec du blabla et je souhaite dans m Menu Vertical reste ouvert [ par oudjat ] Bonjour &#224; tous, la programmation n'&#233;tant pas mon fort, je m'adresse &#224; vous pour savoir si vous n'auriez pas hasard un menu vertical qui Générer un menu vertical à partir d'une image [ par hugo37 ] Bonjour &#224; tous, j'ai un petit probl&#232;me, en fait les scripts permettant d'ins&#233;rer un menu d&#233;roulant ect... sont tr&#232;s bien sur menu vertical avec problème [ par sam59200 ] bonjour,bon je vous dit tout de suite : je d&#233;marre dans ce domaine donc je suis TR&#201;S nulle............j'ai un site personnelle et je n'arriv menu déroulant vertical [ par rduvrac ] J'ai r&#233;cup&#233;r&#233; ce script mais il ne fonctionne pas. J'aimerai bien car il est simple &#224; mettre en place et &#224; actualiser sinon. Menu vertical : clignotement sous Firefox [ par gsaunier ] Bonjour, Dans un menu créé sous JS/CSS, je fais face à un problème de clignotement indésirable (cf. http://forum.alsacreations.com/topic.php?fid=5&tid


Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,265 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.