CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 02:56:37

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> MENU VERTICAL TRES SIMPLE D'UTILISATION

MENU VERTICAL TRES SIMPLE D'UTILISATION

Information sur la source

Note :

5,33 / 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

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Sources en rapport avec celle ci

MENU ANIMÉ AVEC IMAGE SURVOLÉE ! par TheBigBananier

MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12

MENU VERTICAL D'UNE PAGE DHTML, GENERE DYNAMIQUEMENT, UTILIS... par LUDINSKI

MENU SIMPLE ET PRATIQUE (POSSIBLITÉ DE L'ARRONDIR?) par goingup

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 à tous, la programmation n'étant pas mon fort, je m'adresse à 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 à tous, j'ai un petit problème, en fait les scripts permettant d'insérer un menu déroulant ect... sont très bien sur menu vertical avec problème [ par sam59200 ] bonjour,bon je vous dit tout de suite : je démarre dans ce domaine donc je suis TRÉS nulle............j'ai un site personnelle et je n'arriv menu déroulant vertical [ par rduvrac ] J'ai récupéré ce script mais il ne fonctionne pas. J'aimerai bien car il est simple à mettre en place et à 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

Derniers Blogs

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

RE : CREATION DE SCORING OU RATING par buno

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011