1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Menu & Co
  5. Menu contextuel click droit ameliore

Menu contextuel click droit ameliore

Soyez le premier à donner votre avis sur cette source.

Vue 16 684 fois - Téléchargée 935 fois

Télécharger le projet
Commenter

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 / Exemple : 


<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.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
38
Date d'inscription
mercredi 9 février 2005
Statut
Membre
Dernière intervention
23 septembre 2013
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>



[liens1.html Liens 1]

[liens2.html Liens 2]
<hr size="1" noshade />
[liens3.html Liens 3]


<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>
</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)
Signaler
Messages postés
38
Date d'inscription
mercredi 9 février 2005
Statut
Membre
Dernière intervention
23 septembre 2013
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.
Signaler
Messages postés
166
Date d'inscription
mercredi 27 juin 2007
Statut
Membre
Dernière intervention
31 mars 2014
 1
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..
Signaler
Messages postés
1
Date d'inscription
mardi 25 juillet 2006
Statut
Membre
Dernière intervention
25 juillet 2006
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 ?
Signaler
Messages postés
3
Date d'inscription
mercredi 28 décembre 2005
Statut
Membre
Dernière intervention
30 décembre 2005
çà marche.
Merci beaucoup!!
Afficher les 14 commentaires
S'inscrire maintenant

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.

Du même auteur (flashfun)