Un menu avec le bouton droit !

Contenu du snippet

Voici un menu qui apparati quand on clic avec le bouton droit de la souris.

Source / Exemple :


Dans le HEAD :
<style>
#menu{
position:absolute;
width:155px;
border:3px solid navy;
background-color:lightblue;
font-family:Arial, Verdana;
font-size: 9pt;
line-height:18px;
cursor:default;
visibility:hidden;
}
.menuitems{
padding-left:5px;
padding-right:5px;
}
</style>

<script language="JavaScript1.2">
var display_url=1
function showmenu(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY

if (rightedge<menu.offsetWidth)
menu.style.left=document.body.scrollLeft+event.clientX-menu.offsetWidth
else
menu.style.left=document.body.scrollLeft+event.clientX

if (bottomedge<menu.offsetHeight)
menu.style.top=document.body.scrollTop+event.clientY-menu.offsetHeight
else
menu.style.top=document.body.scrollTop+event.clientY

menu.style.visibility="visible"
return false
}

function hidemenu(){
menu.style.visibility="hidden"
}

function over(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="yellow"
if (display_url==1)
window.status=event.srcElement.url
}
}

function out(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="black"
window.status=''
}
}

function linkTo(){
if (event.srcElement.className=="menuitems")
window.location=event.srcElement.url
}
</script>

Dans le BODY :
<!--[if IE 5]>
<CENTER><B>Bouton droit pour ouvrir le menu - - Bouton gauche pour fermer le menu</B></CENTER>
<![endif]-->
<![if ! IE 5]>
<center><b>Désolé, ce script nécessite Internet Explorer, Version 5+</b></center>
<![endif]>
<div id="menu" onMouseover="over()" onMouseout="out()" onClick="linkTo()">
<div class="menuitems" url="index.htm">Page d'accueil</div>
<div class="menuitems" url="tbnew.html">Nouveautés du mois</div>
<div class="menuitems" url="../search/search.htm">Recherche dans le site</div>
<HR SIZE=1 NOSHADE>
<div class="menuitems" url="auteur.htm">L'auteur</div>
<div class="menuitems" url="meme.htm">Du même auteur</div>
</div>

Juste avant </BODY> :
<script language="JavaScript1.2">
document.oncontextmenu=showmenu
if (document.all&&window.print)
document.body.onclick=hidemenu
</script>

Conclusion :


Amusez-vous bien ! :)

A voir également

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.