Menu Flotante
Me gustaria saber como hacer o donde encontrar un script que me permita hacer un menu flotante al estilo de los menu contextuales de windows, que se active haciendo clic con el boton derecho de mouse encima de la pagina y que tenga opciones con submenu
1 Respuesta
Respuesta de derke
1
El codigo es un poco largo, pero no pesado. Si quieres mete la parte del head en un archivo .js y sera más manejable.
<html>
<head>
<script>
/*
SCRIPT DE L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
El script solo vale para IE 5+
*/
document.write("<style>");
document.write(".skin0{position:absolute; width:200px; border:2px solid black; line-height:20px; background-color:menu; font-family:Verdana; cursor:default; visibility:hidden; }");
document.write(".skin1{cursor: default; font: menutext; position: absolute; width: 145px; background-color: menu; border: 1 solid buttonface;visibility:hidden; border: 2 outset buttonhighlight; font-family: Verdana; font-size: 10px; color: black;}");
document.write(".menuitems{padding-left:15px; padding-right:10px; }");
document.write("</style>");
var menuskin=1 // 1 para que sea como el de windows, 0 para que sea personalizado totalmente. Pruebalo.
var display_url=0 // 1 para que se muestre en la barra de estado la url, 0 para que no
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>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="javascript:history.go(-1)">Atrás</div>
<div class="menuitems" url="javascript:history.go(1)">Adelante</div><hr>
<div class="menuitems" url="index.htm">Todas las astucias</div>
<div class="menuitems" url="http://www.iespana.es/">i (españa)</div>
</div>
<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>
Juega con el codigo provando. ;)
<html>
<head>
<script>
/*
SCRIPT DE L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
El script solo vale para IE 5+
*/
document.write("<style>");
document.write(".skin0{position:absolute; width:200px; border:2px solid black; line-height:20px; background-color:menu; font-family:Verdana; cursor:default; visibility:hidden; }");
document.write(".skin1{cursor: default; font: menutext; position: absolute; width: 145px; background-color: menu; border: 1 solid buttonface;visibility:hidden; border: 2 outset buttonhighlight; font-family: Verdana; font-size: 10px; color: black;}");
document.write(".menuitems{padding-left:15px; padding-right:10px; }");
document.write("</style>");
var menuskin=1 // 1 para que sea como el de windows, 0 para que sea personalizado totalmente. Pruebalo.
var display_url=0 // 1 para que se muestre en la barra de estado la url, 0 para que no
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>
<div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5()">
<div class="menuitems" url="javascript:history.go(-1)">Atrás</div>
<div class="menuitems" url="javascript:history.go(1)">Adelante</div><hr>
<div class="menuitems" url="index.htm">Todas las astucias</div>
<div class="menuitems" url="http://www.iespana.es/">i (españa)</div>
</div>
<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>
Juega con el codigo provando. ;)
