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

Soyez le premier à donner votre avis sur cette source.

Snippet vu 54 104 fois - Téléchargée 26 fois

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

Ajouter un commentaire

Commentaires

cs_fopa
Messages postés
1
Date d'inscription
vendredi 5 août 2005
Statut
Membre
Dernière intervention
18 mai 2008
-
Oui:

Menu

...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
julieninformatique
Messages postés
55
Date d'inscription
samedi 25 septembre 2004
Statut
Membre
Dernière intervention
7 août 2007
-
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...
cs_hrz
Messages postés
43
Date d'inscription
samedi 12 juillet 2003
Statut
Membre
Dernière intervention
4 avril 2010
-
Bip & Boup voila les fonction que je cherchais
simple et ca marche avec Firefox super!
ca evite de le faire soit meme merci
MadM@tt
Messages postés
2215
Date d'inscription
mardi 11 novembre 2003
Statut
Membre
Dernière intervention
16 juillet 2009
-
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)
cs_badoux
Messages postés
137
Date d'inscription
samedi 21 février 2004
Statut
Membre
Dernière intervention
16 décembre 2008
-
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
soit visible avec NN et pas seulement avec IE(6), je me suis renseigner à plusieurs place j'en ai déduit que les
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.

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.