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

Ce site au démarrage

begin process at 2010 02 10 03:14:43

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

MENU CONTEXTUEL CLICK DROIT AMELIORE

Information sur la source

Note :

6,40 / 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é :12 984 / 842

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 !

menucontextuel.html 3 026 octets

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 )

CONVERTION ET RE-CONVERTION DU TEXTE EN MODE ASCII (AVEC LA ...

REDIMENSION AUTOMATIQUE D'UN TEXTAREA OU INPUT TEXTE SELON L...

Toutes les sources de flashfun

Sources de la même categorie

MENU VERTICALE GAUCHE ET DROIT DEROULANT par kazma

MENU VERTICALE EN TRANSPARENCE par dlvains

MENU DÉROULANT EN IMAGES par dlvains

TBFRAME: TAB BROWSING FRAME par triumphs

MENU PRINCIPAL par ali1987

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

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

Forum

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5