Recursos Web Herramientas Tutoriales Programacion JavaScript

menu emergente javascript




esta rutina despliega un menú emergente cuando el usuario pulsa el botón derecho del mouse.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html><head><title>menú desplegable apartir del botón derecho</title>

<style>.skin0 {
background-color: #ffffcc; border-bottom: black 2px solid; border-left: black 2px solid; border-right: black 2px solid; border-top: black 2px solid; cursor: default; font-family: verdana; font-size: 10px; line-height: 15px; position: absolute; visibility: hidden; width: 225px
}
.menuitems {
padding-left: 10px; padding-right: 10px
}
</style>

<script language=javascript1.2>
var menuskin=0
var display_url=0
function showmenuie5(){
var rightedge=document.body.clientwidth-event.clientx
var bottomedge=document.body.clientheight-event.clienty
if (rightedge<ie5menu.offsetwidth)
ie5menu.style.left=document.body.scrollleft+event.clientx-ie5menu.offsetwidth
else
ie5menu.style.left=document.body.scrollleft+event.clientx
if (bottomedge<ie5menu.offsetheight)
ie5menu.style.top=document.body.scrolltop+event.clienty-ie5menu.offsetheight
else
ie5menu.style.top=document.body.scrolltop+event.clienty
ie5menu.style.visibility="visible"
return false
}
function hidemenuie5(){
ie5menu.style.visibility="hidden"
}
function highlightie5(){
if (event.srcelement.classname=="menuitems"){
event.srcelement.style.backgroundcolor="highlight"
event.srcelement.style.color="white"
if (display_url==1)
window.status=event.srcelement.url
}
}
function lowlightie5(){
if (event.srcelement.classname=="menuitems"){
event.srcelement.style.backgroundcolor=""
event.srcelement.style.color="black"
window.status=''
}
}
function jumptoie5(){
if (event.srcelement.classname=="menuitems"){
if (event.srcelement.getattribute("target")!=null)
window.open(event.srcelement.url,event.srcelement.getattribute("target"))
else
window.location=event.srcelement.url
}
}
</script>
</head>
<body>
<br>
<p align=center>pulsa el botón derecho del mouse para ver el menú emergente.</p>

<!--[if ie]>
<div class=skin0 id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5()
onmouseover=highlightie5()>
<div class=menuitems target="_top" url="#">• opción nº 1</div>
<div class=menuitems target="_top" url="#">• opción nº 2</div>
<div class=menuitems target="_top" url="#">• opción nº 3</div>
<div class=menuitems target="_top" url="#">• opción nº 4</div>
<div class=menuitems target="_top" url="#">• opción nº 5</div>
</div>

<![endif]-->
<script language=javascript1.2>
if (document.all&&window.print){
if (menuskin==0)
ie5menu.classname="skin0"
else
ie5menu.classname="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</script>

</body></html>


download javascript Download Script


Ver ejemplo javascript

Debes copiar y pegar esta porción de código en tu página.



Scripts Javascript