Menu dhtml : pas bien sorcier mais pratique a savoir

Commenter

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

S'inscrire maintenant

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.

Du même auteur (lumesh)