Menu contextuel clic droit

Soyez le premier à donner votre avis sur cette source.

Snippet vu 14 117 fois - Téléchargée 25 fois

Contenu du snippet

Un menu contextuel, qui s'affiche sur un clic droit de la souris.

A l'origine ce script viens du site Firstpointcom.com, que j'ai légèrement modifé. Entre autre pour que le menu disparaisse au second clic droit, ou au clic gauche sur la page.

Le menu étant une DIV, on peut y mettre ce qu'on veut des images, des liens, de champs, ...

Source / Exemple :


<HTML><HEAD>
<STYLE type="text/css">
 A:link {color: #808080;text-decoration:none;} A:visited {color: #808080;text-decoration:none;} A:hover {color: #C0C000;text-decoration:underline;} 

#contextMenu { 
  position: absolute; 
  visibility: hidden; 
  width: 150px; 
  background-color: lightyellow; 
  layer-background-color: lightgrey; 
  border: 2px outset white; 
} 
</STYLE> 
<SCRIPT>
var menu;

function hideMenu() { document.all.contextMenu.style.visibility="hidden"; }

function showMenu (evt) {
  if (document.all) { 
    if (event.type == "contextmenu") { 
      document.all.contextMenu.style.pixelLeft = event.clientX; 
      document.all.contextMenu.style.pixelTop = event.clientY; 
      document.all.contextMenu.style.visibility=='visible'?document.all.contextMenu.style.visibility='hidden':document.all.contextMenu.style.visibility='visible'; 
      return false;  
    }
  } 
  else if (document.layers) { 
    if (evt.which == 3) { 
      document.contextMenu.left = evt.x; 
      document.contextMenu.top = evt.y; 
      document.contextMenu.onmouseout = function (evt) { this.visibility = 'hide'; };
      document.contextMenu.visibility=='show'?document.contextMenu.visibility='hide':document.contextMenu.visibility='show';
      return false; 
    } 
  } 
  return true; 
} 
if (document.all) { 
  document.oncontextmenu = showMenu;
  document.onclick = hideMenu;
}

if (document.layers) { 
  document.captureEvents(Event.MOUSEDOWN); 
  document.onmousedown = showMenu; 
} 
</SCRIPT>
</HEAD>
<BODY onclick="showMenu('Event.MOUSEDOWN')">
<DIV ID="contextMenu"> 
<img src="news.gif">&nbsp<A HREF="http://www.firstpointcom.com">FirstPointCom</A>
<BR>
<img src="news.gif">&nbsp<A HREF="http://www.javascriptfr.com">Javascriptfr</A>
</DIV></BODY></HTML>

Conclusion :


Bien sur vous pouvez mettre n'importe qu'elle image à la place, ici pour l'exemple j'en ai mise une toute petite, comme il y a dans les menu de ce site.

Remarques, question, ... n'hésitez pas ;)

En fait il y a déjà 2 ou 3 codes qui ressemble beaucoup à ca j'ai vu !! (Tant pis)

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
vendredi 18 avril 2003
Statut
Membre
Dernière intervention
27 mai 2013

Bonjour à tous,

Cela fait plusieurs jours que je tente d'adapter ce code à mon problème.

Je dois créer plusieurs menu contextuel et ouvrir l'un ou l'autre en fonction de l'ID de la balise
sur lequel l'utilisateur à fait un click-droit.

Je n'y arrive pas...

Quelqu'un peut-il m'aider ???

Merci d'avance.
Messages postés
115
Date d'inscription
jeudi 8 mai 2003
Statut
Membre
Dernière intervention
3 janvier 2016

merci swaenboutu ;)
Messages postés
22
Date d'inscription
jeudi 11 novembre 2004
Statut
Membre
Dernière intervention
18 avril 2016

Juste un petit message pour te signaler que le code que tu as fais correspond tout à fait à mes besoins (après quelques modifications mineures)
Donc merci beaucoup
Messages postés
296
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004

Si vous voulez que votre menu s'affiche toujours à l'intérieur de la page, j'ai fais un pragramme ici :

http://www.javascriptfr.com/code.aspx?ID=17534
Messages postés
296
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004

hazerty>>

Il te suffit d'incérer le onclick... là où tu veux.

Tu le retire du body :



et tu le place ailleurs :

<p onclick="showMenu('Event.MOUSEDOWN')" ...
<a onclick="showMenu('Event.MOUSEDOWN')" ...
<b onclick="showMenu('Event.MOUSEDOWN')" ...

Voilà j'espère t'avoir aidé.
Afficher les 9 commentaires

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.