MENU DÉROULANT SIMPLIFIÉ... FAIRE APPARAITRE ET DISPARAITRE UN DIV. , Source N°15882

Information sur la source

Catégorie :Menu & Co Niveau : Débutant Date de création : 03/07/2002 Date de mise à jour : 03/07/2002 14:23:09 Vu : 36 573

Auteur : Legion

Site perso

Ecrire un message privé

Note :
Aucune note

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

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

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

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

Sources du même auteur

Toutes les sources de Legion

Sources de la même categorie

Toutes les sources de la catégorie Menu & Co

Commentaires

Commentaire de meh le 26/08/2003 16:37:10

ça marche pas:((
y a que le menu qui apparaît et il se passe rien du tout!
dommage!
???
Commentaire de badoux le 17/10/2004 03:20:21

Fonction JavaScript non compatible avec NN 7.0.2 (Netsacpe) !!!!!!!

Bonjour je suis débutant dans le dhtml, je voudrai bien trouver un moyen pour que ma fenetre en <DIV> soit visible avec NN et pas seulement avec IE(6), je me suis renseigner à plusieurs place j'en ai déduit que les <DIV> ne sont pas très aprécier par NN par contre les <LAYER> le sont plus, mais sont elles aimer par IE ?

Merci de me rendre réponse le plus vite possible !
Mes salutations Mme M.
Commentaire de MadM@tt le 02/08/2005 22:15:23

Je crois que ça marche pas parce qu'il faut remplacer :
<div id="JOKE" style="border-style:none; border-width:0; position: absolute;

par :
<div id="ID_MENU1" style="border-style:none; border-width:0; position: absolute;

Voilà, ressayez pour voir ? (PS : je suis débutant alors si ça se trouve c'est des conneries ce que je dis lol)
Commentaire de hrz le 20/08/2005 13:49:39

Bip & Boup voila les fonction que je cherchais
simple et ca marche avec Firefox super!
ca evite de le faire soit meme merci
Commentaire de julieninformatique le 26/12/2006 14:40:04

Bonjour, Je veux pas dire mais ce n'est pas parce que le code est dans un fichier js externe que le code est protégé contre la copie il suffit de regarder la source et de regarder le lien du fichier externe et de le mettre dans la barre d'adresse de n'importe qu'elle
navigateur. Par contre il existe des méthodes pour coder le js voila je vous laisse...
Commentaire de fopa le 18/05/2008 22:19:04

Oui:

<div id="ID_MENU1" (et non "JOKE")... ou ce que vous voudrez, à condition que tout concorde (et pourquoi pas nommer la <div JOKE...). Mais il me semble surtout ( à vérifier...) que si dans :

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

...bip() et boup() sont sans majuscules - Bip() et Boup() - ben ça marche pas.

Mais comme aussi le style visibility (je sais pas pourquoi mais je pourrais trouver...) dans le head marche pas COMME TEL, je l'ai mis dans la définition de la div elle même ( style="visibility: hidden" ) et là ça va.

Merci pour ce script que je vais transformer un peu peur avoir plus de niveaux et mettre du fade in et out.

fopa