begin process at 2012 02 11 02:56:37
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Menu & Co

 > MENU VERTICAL TRES SIMPLE D'UTILISATION

MENU VERTICAL TRES SIMPLE D'UTILISATION


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

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

Auteur : tidave

Ecrire un message privé
Site perso
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


 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking

 Sources en rapport avec celle ci

Source avec une capture MENU ANIMÉ AVEC IMAGE SURVOLÉE ! par TheBigBananier
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
Source avec Zip Source avec une capture MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILIS... par LUDINSKI
Source avec Zip MENU SIMPLE ET PRATIQUE (POSSIBLITÉ DE L'ARRONDIR?) par goingup
Source avec une capture MENU SIMPLE par tit1012

Commentaires et avis

Commentaire de coucou747 le 22/07/2005 12:17:16 administrateur CS

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

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?

Commentaire de coucou747 le 22/07/2005 14:01:36 administrateur CS

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

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.

Commentaire de coucou747 le 22/07/2005 14:33:22 administrateur CS

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

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

Commentaire de coucou747 le 23/07/2005 01:00:57 administrateur CS

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

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

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 4,196 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales