CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 11:22:54

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Menu & Co

> MENU DÉROULANT SIMPLIFIÉ... FAIRE APPARAITRE ET DISPARAITRE UN DIV.

MENU DÉROULANT SIMPLIFIÉ... FAIRE APPARAITRE ET DISPARAITRE UN DIV.

Information sur la source

Note :
Aucune note

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 :51 513

Auteur : Legion

Ecrire un message privé

Site perso

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

RENVOYER LE VISITEUR SUR UNE PAGE EN FONCTION DE SA RÉSOLUTI...

NE PAS AFFICHER LES MESSAGES D'ERREUR JS

FAIRE PATIENTER LES VISITEURS PENDANT LE CHARGEMENT D'UNE PA...

DÉTECTER UNE IP

POUR DÉSACTIVER LE CLICK DROIT SIMPLEMENT

Toutes les sources de Legion

Sources de la même categorie

UN MENU EN CSS par Julien39

FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41

TREEMENU-2.3.6-MACNIP par neep

MENU CIRCULAIRE par adelmonis

MENU TASKBAR WINDOWSXP HOME par micking

Toutes les sources de la catégorie Menu & Co

Commentaires et avis

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

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP