Menu déroulant simplifié... faire apparaitre et disparaitre un div.

Commenter

Contenu du snippet

Au cas où tout le monde ne le saurait pas, un DIV est en HTML une balise pour annoncer un calque. Le calque se situe par l'intermédiaire de coordonnées (haut et gauche) et peut se superposer à n'importe quoi dans le corps de la page.
Ici nous utiliserons des DIV ainsi que les commandes Javascript "onmouseover" et "onmouseout".

Source / Exemple : 


// Dans le HEAD... Déclarer le DIV comme invisible... Notre exemple comptera un DIV. 
//Pour cela nous déclarons ici un élement... 

<head>
<style>
    #ID_MENU1 {visibility:hidden}
</style>
</head>

// Pour protéger votre code, je vous conseille de déclarer les fonctions dont nous aurons 
// besoin dans un fichier js externe. Un tel fichier doit être enregistré comme par exemple: 
// javascript.js 

// SCRIPT CONCERNANT LE PREMIER SOUS-MENU DEROULANT

//  Nous nous aiderons de deux fonctions, une pour faire apparaitre le DIV et l'autre pour le 
// faire disparaitre.

function Bip() {                       //Première fonction, donnez-lui le nom que vous désirez.
	if (navigator.appName=='Microsoft Internet Explorer')
	{
   		document.all.ID_MENU1.style.visibility='visible'
	}
	else
	{
   		document.getElementById('ID_MENU1').style.visibility='visible'
	}
	 			;}
function Boup() {                     // Deuxième fonction, pour faire disparaitre le DIV
	if (navigator.appName=='Microsoft Internet Explorer')
	{
   		document.all.ID_MENU1.style.visibility='hidden'
	}
	else
	{
   		document.getElementById('ID_MENU1').style.visibility='hidden'
	}
	 			;} 
// Comme vous pouvez le constater les fonctions se découpent en deux parties, d'une part 
// l'apparition et disparition du DIV avec I.E, et de l'autre son apparition et disparition avec 
// un autre navigateur */

// Dans votre BODY, occupons-nous du lien qui appellera le sous-menu.

<a href="#" onmouseover="bip()" onmouseout="boup()">Menu</a>

// Maintenant passons aux choses sérieuses, le DIV...

// Observez bien les attributs affectés au DIV, ils ont tous leur importance.

<div id="JOKE" style="border-style:none; border-width:0; position: absolute; left:position-gauche; width=135;top: position-haut;
z-index:1; padding-left:4; padding-right:4; padding-top:1; padding-bottom:1; background-color="#FFFFFF" onmouseover="Bip()" onmouseout="Boup()">
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="140" height="113" background="ton-image">
    <tr>
      <td width="100%">
        <font face="Verdana" size="1" color="#000000">
        <a href="#">
          sous-menu 1
        </a><br>
        <a href="#">
          sous-menu 2
        </a><br>
        <a href="#">
          sous-menu 3
        </a><br>
        <a href="#">
         sous-menu 4
        </a><br>
        <a href="#">
          Etc...
        </a><br>
      </td>
    </tr>
  </table>
</div>

//Observez également les fonctions appelées par les onmouseover et onmouseout.
//Le onmouseover c'est quand on passe sur le DIV, le onmouseout c'est qd on en ressort.
//Elles doivent être présentes ici pour conserver l'apparition du DIV quand on y passera 
//la souris.

Conclusion :


Voilà amusez-vous bien avec ca vous pouvez adapter ce code à loisir.

Liste des bugs connus:
- Si vous ne calculez pas pile poil la position du DIV vous risquez d'avoir un bug génant: le sous-menu disparaissant quand vous passez du menu au sous-menu (surtout s'il reste un mince interstice.
- En chargeant la page si vous multipliez les sous-menu certains apparaitrons d'office (il faudra alors passer la souris dessus pour qu'ils disparaissent).

Bon courage...

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 (cs_Legion)