Menu dhtml : pas bien sorcier mais pratique a savoir

Soyez le premier à donner votre avis sur cette source.

Snippet vu 19 571 fois - Téléchargée 27 fois

Contenu du snippet

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 / Exemple :


<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>
</html>

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

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
lundi 16 octobre 2006
Statut
Membre
Dernière intervention
10 janvier 2007

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

BRAVO !! BRAVO !!!!
Messages postés
258
Date d'inscription
samedi 25 décembre 2004
Statut
Membre
Dernière intervention
13 novembre 2012

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


Jn
10/10
Messages postés
105
Date d'inscription
mercredi 17 septembre 2003
Statut
Membre
Dernière intervention
17 mars 2017

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
Messages postés
320
Date d'inscription
mercredi 9 octobre 2002
Statut
Membre
Dernière intervention
6 avril 2008

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

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.