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

Ce site au démarrage

begin process at 2012 05 28 11:23:13

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

> MENU DHTML : PAS BIEN SORCIER MAIS PRATIQUE A SAVOIR

MENU DHTML : PAS BIEN SORCIER MAIS PRATIQUE A SAVOIR

Information sur la source

Note :

8,00 / 10

Catégorie :Trucs & Astuces Niveau :Débutant Date de création :01/05/2003 Date de mise à jour :01/05/2003 18:20:51 Vu :18 343

Auteur : lumesh

Ecrire un message privé

Site perso

Commentaire sur cette source (4)

Ajouter un commentaire et/ou une note

Description

Un petit menu tout simple avec des sous menu.
pour lexemple j'ai mis k1 seul sous nvo de menu mais plusieurs ss nvo sont tre facilement realisable.

Source

<html>
<head>
<title>Menu dHTML</title>
<meta name="author" content="Christophe">
<SCRIPT language=JScript>
function ShowHide(Div) {
if (Div.style.display=='none') {
Div.style.display='InLine';
}
else {
Div.style.display='none';
}
}
</SCRIPT>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<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;">titre
<a href="#" OnClick="javascript: ShowHide(menu1);">menu 1</a></p>
</td>
</tr>
</table>
<DIV id='menu1' style=display=InLine;>
<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;">titre
<a href="#" OnClick="javascript: ShowHide(menu2);">menu 2</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;">titre
<a href="#" OnClick="javascript: ShowHide(menu3);">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>
</body>
</html>

<html>

<head>
<title>Menu dHTML</title>
<meta name="author" content="Christophe">

<SCRIPT language=JScript>
 function ShowHide(Div) {
   if (Div.style.display=='none') {
     Div.style.display='InLine';
    } 
    else {
     Div.style.display='none';
    }
  }
</SCRIPT>

</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<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;">titre 
            <a href="#" OnClick="javascript: ShowHide(menu1);">menu 1</a></p>
        </td>
    </tr>
</table>

<DIV id='menu1' style=display=InLine;>

<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;">titre 
            <a href="#" OnClick="javascript: ShowHide(menu2);">menu 2</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;">titre 
            <a href="#" OnClick="javascript: ShowHide(menu3);">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>

</body>

</html>

Conclusion

en gros c simple:

entre les balises <head> </head> il y a une ptite fonction JS.

pour afficher ou cacher un element il faut tout simplement utiliser des balise DIV

exemple:
vous avez un lien et quand celui ci est clické vous voulez faire apparraitre une description:
alors faites:

<html>
<head>
<SCRIPT language=JScript>
function ShowHide(Div) {
   if (Div.style.display=='none') {
     Div.style.display='InLine';
    }
    else {
     Div.style.display='none';
    }
  }
</SCRIPT>
</head>
<body>

< a href="#" OnMouseOver="javascript: ShowHide(lien);" OnMouseOut="javascript: ShowHide(lien);"><font size="3" face="Verdana,Arial" color="#990000">le lien a decrire</font></a><font color="#990000">
</font><div id="lien" style=display=none;>
<font size="2" face="Verdana,Arial" color="#9999FF"> (ici la description du lien)
</font></div>

</body>
&lt ;/html>

et voila c'est tout con !
en plus on peut faire pas mal de choses !

Sources du même auteur

DIV: VRAI FAUSSE FENETRE

DIV/LAYER MOBILE COMME UNE FENETRE

Toutes les sources de lumesh

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de Mumuri le 31/05/2003 13:27:58

En effet, je te félicite, j'avais moi méme utilisé le principer pour faire afficher des aides sur mon site. ON peut faire plein de trucs avec ca

Commentaire de romalafrite le 09/04/2004 19:25:09

Enfin je le trouve. Au milieu de tous les scripts compliqués et finalement inutiles, on ne trouve plus les scripts de base, il était important d'en mettre un comme celui ci ici.

Rien à redire, sauf que ça serait bien de le valider XHTML. (fermer les balises, mettre des guillemets autour des attributs, etc.) Mais cela dit, c'est pas l'objet du lieu.

9/10

Commentaire de jnbrunet le 23/09/2005 00:38:11

vraiment bien...je débute et j'avais justement besoin d'un code simple comme celui là....vrm merci

Jn
10/10

Commentaire de badams6262 le 10/01/2007 17:21:22

Nickel !!!!
Thanks à l'auteur !!!

BRAVO !! BRAVO !!!!

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP