Menu contextuel click droit ameliore

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

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)