begin process at 2012 02 12 11:06:10
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Menu & Co

 > MENU CONTEXTUEL CLICK DROIT AMELIORE

MENU CONTEXTUEL CLICK DROIT AMELIORE


 Information sur la source

Note :
6,4 / 10 - par 5 personnes
6,40 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Menu & Co Niveau :Expert Date de création :30/10/2003 Date de mise à jour :21/08/2004 00:06:15 Vu / téléchargé :15 093 / 881
Auteur : flashfun

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 Description

Menu contextuel click droit compatible IE et Netscape et Amélioré,
cad que quand la fenètre est trop petit par rapport au menu,
le position du menu s'adapte prend en compte la position de chaque ascenseur:

Trop haut => top=0
Trop large => left=0

Comme ca on peut voir le menu avec l'ascenceur,
au lieu qu'il soit en dehors de la page visible.

Source

  • <html><head>
  • <style>
  • #menuC {
  • color:#0080ff;
  • background-color:#000000;
  • position:absolute;
  • left:-395px;
  • top:-395px;
  • width:12em;
  • border: 5px outset green;
  • line-height:0.9em;
  • cursor:default;
  • }
  • #menuC a {
  • color:#0080ff;
  • font-size:15px;
  • font-family:Times New Roman,Arial;
  • font-weight:bold;
  • padding-left:15px;
  • padding-right:15px;
  • cursor:hand;
  • }
  • #menuC a:hover {
  • color:#ffffff;
  • font-size:15px;
  • font-family:Times New Roman,Arial;
  • font-weight:bold;
  • padding-left:15px;
  • padding-right:15px;
  • cursor:hand;
  • }
  • </style>
  • <script language="JavaScript">
  • // Le sommaire : Début
  • var menuC;
  • var menuCStyle;
  • function showmenuC(e){ // Place le sommaire et l'affiche à l'écran
  • var cX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
  • var cY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;
  • var rightedge= document.body.clientWidth-cX;
  • var bottomedge= document.body.clientHeight-cY;
  • if (rightedge>menuC.offsetWidth) {menuCStyle.left=document.body.scrollLeft+cX;}
  • else {menuCStyle.left=document.body.scrollLeft+cX-menuC.offsetWidth;}
  • if (document.body.scrollLeft>document.body.scrollLeft+cX-menuC.offsetWidth && rightedge<menuC.offsetWidth)
  • {menuCStyle.left=document.body.scrollLeft;}
  • if (bottomedge>menuC.offsetHeight) {menuCStyle.top=document.body.scrollTop+cY;}
  • else {menuCStyle.top=document.body.scrollTop+cY-menuC.offsetHeight;}
  • if (document.body.scrollTop>document.body.scrollTop+cY-menuC.offsetHeight && bottomedge<menuC.offsetHeight)
  • {menuCStyle.top=document.body.scrollTop;}
  • menuCStyle.visibility="visible";
  • return false;
  • }
  • function hidemenuC(){menuCStyle.visibility="hidden";} // Cache le sommaire.
  • if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);
  • // Le sommaire : Fin
  • </script>
  • </head>
  • <body>
  • <div id="menuC" >
  • <a href="liens1.html">Liens 1</a><br />
  • <a href="liens2.html">Liens 2</a>
  • <hr size="1" noshade />
  • <a href="liens3.html">Liens 3</a>
  • </div>
  • <script language="JavaScript1.2">
  • document.oncontextmenu=showmenuC;
  • document.onclick=hidemenuC;
  • menuC=document.getElementById("menuC");
  • menuCStyle=document.getElementById("menuC").style;
  • </script>
  • </body></html>
<html><head>
<style>
#menuC       {
  color:#0080ff;
  background-color:#000000;
  position:absolute;
  left:-395px;
  top:-395px;
  width:12em;
  border: 5px outset green;
  line-height:0.9em;
  cursor:default;
    }
#menuC a     {
  color:#0080ff;
  font-size:15px;
  font-family:Times New Roman,Arial;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  cursor:hand;
    }
#menuC a:hover     {
  color:#ffffff;
  font-size:15px;
  font-family:Times New Roman,Arial;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  cursor:hand;
    }

</style>
<script language="JavaScript">

// Le sommaire : Début

var menuC;
var menuCStyle;

function showmenuC(e){  // Place le sommaire et l'affiche à l'écran

var cX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
var cY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;


var rightedge= document.body.clientWidth-cX;
var bottomedge= document.body.clientHeight-cY;

if (rightedge>menuC.offsetWidth) {menuCStyle.left=document.body.scrollLeft+cX;}
else {menuCStyle.left=document.body.scrollLeft+cX-menuC.offsetWidth;}

if (document.body.scrollLeft>document.body.scrollLeft+cX-menuC.offsetWidth && rightedge<menuC.offsetWidth)
{menuCStyle.left=document.body.scrollLeft;}

if (bottomedge>menuC.offsetHeight) {menuCStyle.top=document.body.scrollTop+cY;}
else {menuCStyle.top=document.body.scrollTop+cY-menuC.offsetHeight;}

if (document.body.scrollTop>document.body.scrollTop+cY-menuC.offsetHeight && bottomedge<menuC.offsetHeight)
{menuCStyle.top=document.body.scrollTop;}

menuCStyle.visibility="visible";
return false;
}


function hidemenuC(){menuCStyle.visibility="hidden";} // Cache le sommaire.



if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);

// Le sommaire : Fin


</script>
</head>
<body>
<div id="menuC" >
<a href="liens1.html">Liens 1</a><br />
<a href="liens2.html">Liens 2</a>
<hr size="1" noshade />
<a href="liens3.html">Liens 3</a>
</div>
<script language="JavaScript1.2">
document.oncontextmenu=showmenuC;
document.onclick=hidemenuC;

menuC=document.getElementById("menuC");
menuCStyle=document.getElementById("menuC").style;
</script>

</body></html>

 Conclusion

Il y a que 2 fonctions,  1 pour afficher le menu et l'autre pour le cacher.
On peut ajouter tous ce que l'on veux dans la div "menuC".

Pour le reste, j'ai juste rajouter des configuration de style.

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

20 août 2004 23:40:27 :
20 août 2004 23:47:11 :
21 août 2004 00:06:15 :

 Sources du même auteur

ASCENSEUR, DÉPLACEMENT SANS FIN SAUF SURVOLE DE LA SOURIS. X...
DRAG AND DROP, TIRÉ ET DÉPLACÉ DES IMAGES, SANS MODIFIER LES...
LIMITE LA TAILLE D'UN TEXTAREA ( MAXLENGHT )
Source avec Zip CONVERTION ET RE-CONVERTION DU TEXTE EN MODE ASCII (AVEC LA ...
Source avec Zip REDIMENSION AUTOMATIQUE D'UN TEXTAREA OU INPUT TEXTE SELON L...
Toutes les sources de flashfun

 Sources de la même categorie

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec Zip FLÈCHE CLIGNOTANTE AU SURVOL D'UN LIEN par lecurieux41
Source avec Zip Source avec une capture TREEMENU-2.3.6-MACNIP par neep
Source avec Zip Source avec une capture MENU CIRCULAIRE par adelmonis
Source avec Zip Source avec une capture MENU TASKBAR WINDOWSXP HOME par micking
Toutes les sources de la catégorie Menu & Co

Commentaires et avis

Commentaire de Nocturne le 30/10/2003 20:02:19

Elle est tres bien cette source, le seul reproche que je peu faire, c'est qu'elle n'est pas compatible avec Netscape.
Bonne continuation flashfun.
a+, Nocturne

Commentaire de flashfun le 30/10/2003 20:23:04

Dsl, je ne me suis jamais mis à netscape pour l'instant, car je ne l'ai jamais installé.

Tu peut trouver d'autre programme de ce type adapté à netscape,
ensuite il doit être facile d'adapté la partie que j'ai madifié.

Commentaire de Nocturne le 31/10/2003 00:38:37

Affirmatif, j ai déjà commencé la modif pour Netscape.
Merci.

Commentaire de flashfun le 20/08/2004 23:55:12

Ca y est je l'ai modifié, mon menu est compatible avec tous les navigateurs.

En plus je l'ai simplifié, pour que l'on puisse insérer ce que l'on veux et comme on le veux dans le menu.

On peut se servir de mon menu comme d'un anti-click droit en insérant une image ou un text à la place des liens.

Merci de me confirmé son bon fonctionnement.

Commentaire de Nocturne le 22/08/2004 10:42:39

Bon travail, ca marche sous netscape 7.0
a+ et bonne prog.

Commentaire de aslihan le 28/12/2005 14:45:46

Je souhaiterai faire apparaître ce menu contextuel seulement sur un click droit sur un élément de ma page : pas suite à un click droit sur n'importe quelle partie de ma page.
Est-ce possible?

Commentaire de flashfun le 28/12/2005 17:56:14

Il faut supprimer :
document.oncontextmenu=showmenuC;

et il faut insérer le 'oncontextmenu="showmenuC();"' ds l'élément

Commentaire de aslihan le 29/12/2005 15:28:50

En faisant cela, j'ai 2 menus quand je clique droit : celui par défaut (IE) et le nouveau (Lien1, Lien2)...
Serais-tu comment ne pas avoir le menu IE ?

Merci par avance

Commentaire de flashfun le 30/12/2005 13:52:27

essaye :

'oncontextmenu="showmenuC();return false;"'

Commentaire de aslihan le 30/12/2005 15:50:07

çà marche.
Merci beaucoup!!

Commentaire de Bob33000 le 25/07/2006 00:25:21

Le script marche cependant si on change l'entête <html> par ceci
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
le script ne fonctionne plus, il est à remarquer que ce bug ce reproduit sur beaucoup des scripts proposés sur ce site.

Quel peux en être l'origine et comment corriger cela ?

Commentaire de sagat06 le 12/09/2007 16:38:24

Tout d'abord, je tiens à feliciter FlashFun pour ce script qui me permet d'éviter de longues heures d'agonie.
Ensuite, le script modifié permettant de faire apparaître le menu contextuel sur l'elt. de son choix fonctionne presque parfaitement.
En effet, j'ai voulu le tester avec une image et en cliquant sur celle-ci le menu est apparu mais sous l'image!!
En essayant de jouer avec les Zindex, je n'ai pas réussi à le faire apparaitre dessus.
De plus, débutant en javascript, j'ai lu que la fonction "oncontextmenu" était spécifique à IE et que les autres navigateurs ne le comprenaient pas => question : la modif' avec le 'oncontextmenu="showmenuC();return false;"' inséré dans l'elt. fonctionnera t-elle avec les autres navigateurs??

Bref si qq'un pouvait m'éclairer, j'en serai très reconnaissant.
Merci d'avance et pardonnez moi mes faiblesses, je débute..

Commentaire de foxmaster le 17/10/2007 09:09:42

Bonjour,
je viens de tester cette source qui est vraiment sympa sauf que ... ça marche pas bien sous firefox :-( le click droit fait également afficher le menu contextuel de firefox... quelqu'un saurait t'il comment éviter cela ?
Merci d'avance.

Commentaire de foxmaster le 17/10/2007 10:40:49

Aprés quelques recherches j'ai trouvé le moyen de rendre ce menu compatible firefox voici les modif que j'ai apportées:

<html><head>
<style>
#menuC       {
  color:#0080ff;
  background-color:#000000;
  position:absolute;
  left:-395px;
  top:-395px;
  width:12em;
  border: 5px outset green;
  line-height:0.9em;
  cursor:default;
    }
#menuC a     {
  color:#0080ff;
  font-size:15px;
  font-family:Times New Roman,Arial;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  cursor:hand;
    }
#menuC a:hover     {
  color:#ffffff;
  font-size:15px;
  font-family:Times New Roman,Arial;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  cursor:hand;
    }
</style>
<script language="JavaScript">
// Le sommaire : Début
var menuC;
var menuCStyle;
var ie=0;
function showmenuC(e){  // Place le sommaire et l'affiche à l'écran
if (ie==1)
  {
var cX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
var cY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;
var rightedge= document.body.clientWidth-cX;
var bottomedge= document.body.clientHeight-cY;
if (rightedge>menuC.offsetWidth) {menuCStyle.left=document.body.scrollLeft+cX;}
else {menuCStyle.left=document.body.scrollLeft+cX-menuC.offsetWidth;}
if (document.body.scrollLeft>document.body.scrollLeft+cX-menuC.offsetWidth && rightedge<menuC.offsetWidth)
{menuCStyle.left=document.body.scrollLeft;}
if (bottomedge>menuC.offsetHeight) {menuCStyle.top=document.body.scrollTop+cY;}
else {menuCStyle.top=document.body.scrollTop+cY-menuC.offsetHeight;}
if (document.body.scrollTop>document.body.scrollTop+cY-menuC.offsetHeight && bottomedge<menuC.offsetHeight)
{menuCStyle.top=document.body.scrollTop;}
menuCStyle.visibility="visible";
return false;
}
else
{
if (e.button==2||e.button==3)
{
var cX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
var cY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;
var rightedge= document.body.clientWidth-cX;
var bottomedge= document.body.clientHeight-cY;
if (rightedge>menuC.offsetWidth) {menuCStyle.left=document.body.scrollLeft+cX;}
else {menuCStyle.left=document.body.scrollLeft+cX-menuC.offsetWidth;}
if (document.body.scrollLeft>document.body.scrollLeft+cX-menuC.offsetWidth && rightedge<menuC.offsetWidth)
{menuCStyle.left=document.body.scrollLeft;}
if (bottomedge>menuC.offsetHeight) {menuCStyle.top=document.body.scrollTop+cY;}
else {menuCStyle.top=document.body.scrollTop+cY-menuC.offsetHeight;}
if (document.body.scrollTop>document.body.scrollTop+cY-menuC.offsetHeight && bottomedge<menuC.offsetHeight)
{menuCStyle.top=document.body.scrollTop;}
menuCStyle.visibility="visible";
return false;
}
else
{
hidemenuC();
}
}
}
function hidemenuC(){menuCStyle.visibility="hidden";} // Cache le sommaire.
if (navigator.appName.substring(0,3) == "Net") document.captureEvents(Event.MOUSEMOVE);

// Le sommaire : Fin
</script>
</head>
<body>
<div id="menuC" >
<a href="liens1.html">Liens 1</a><br />
<a href="liens2.html">Liens 2</a>
<hr size="1" noshade />
<a href="liens3.html">Liens 3</a>
</div>
<script language="JavaScript">

if (document.all) // for IE
{
ie=1;
  document.oncontextmenu=showmenuC;
  document.onclick=hidemenuC;

}
else // for FF
{
  document.onclick=showmenuC;
}
menuC=document.getElementById("menuC");
menuCStyle=document.getElementById("menuC").style;
</script>
</body></html>

je n'ai pas réussi a simplifier d'avantage... mais de cette façon cela fonctionne sous IE et firefox!(testé avec les versions 1.5.0.12 et 2.0.0.7)

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,607 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)