Menu Contextual Personalizado

cmarrero · #1 (**permalink**) 19/09/2008, 14:27

Tengo un menu contextual personalizado pero lo utilizo en un Frame, y necesitaria que se vea por encima del frame y no por debajo...

Pagina index.php (En esta pagina estan los frames. es un frame superior y otro inferior.)

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>SISTEMA ADMINISTRATIVO - MAKERS</title> 
</head> 
 
<frameset rows="130,*,50" cols="*" framespacing="0" frameborder="no" border="0"> 
  <frame src="frameset/superior.php" name="superior" scrolling="No" noresize="noresize" id="superior" title="Menu Principal"> 
  <frame src="infocentral.php" name="contenido" id="contenido" title="Informacion Principal"> 
  <frame src="frameset/inferior.php" name="inferior" scrolling="No" noresize="noresize" id="bottomFrame" title="Agenda"> 
</frameset> 
<noframes><body> 
</body> 
</noframes></html>

Archivo JS que sirve para mostrar el Menu Personalizado.

Código PHP:

   
var display_url=0 
 
var ie5=document.all&&document.getElementById 
var ns6=document.getElementById&&!document.all 
if (ie5||ns6) 
var menuobj=document.getElementById("ie5menu") 
 
function showmenuie5(e){ 
//Find out how close the mouse is to the corner of the window 
var rightedge=ie5? document.body.clientWidth-event.clientX : window.innerWidth-e.clientX 
var bottomedge=ie5? document.body.clientHeight-event.clientY : window.innerHeight-e.clientY 
 
//if the horizontal distance isn't enough to accomodate the width of the context menu 
if (rightedge<menuobj.offsetWidth) 
//move the horizontal position of the menu to the left by it's width 
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX-menuobj.offsetWidth : window.pageXOffset+e.clientX-menuobj.offsetWidth 
else 
//position the horizontal position of the menu where the mouse was clicked 
menuobj.style.left=ie5? document.body.scrollLeft+event.clientX : window.pageXOffset+e.clientX 
 
//same concept with the vertical position 
if (bottomedge<menuobj.offsetHeight) 
menuobj.style.top=ie5? document.body.scrollTop+event.clientY-menuobj.offsetHeight : window.pageYOffset+e.clientY-menuobj.offsetHeight 
else 
menuobj.style.top=ie5? document.body.scrollTop+event.clientY : window.pageYOffset+e.clientY 
 
menuobj.style.visibility="visible" 
return false 
} 
 
function hidemenuie5(e){ 
menuobj.style.visibility="hidden" 
} 
 
function highlightie5(e){ 
var firingobj=ie5? event.srcElement : e.target 
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ 
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node 
firingobj.style.backgroundColor="highlight" 
firingobj.style.color="white" 
if (display_url==1) 
window.status=event.srcElement.url 
} 
} 
 
function lowlightie5(e){ 
var firingobj=ie5? event.srcElement : e.target 
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ 
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode //up one node 
firingobj.style.backgroundColor="" 
firingobj.style.color="black" 
window.status='' 
} 
} 
 
function jumptoie5(e){ 
var firingobj=ie5? event.srcElement : e.target 
if (firingobj.className=="menuitems"||ns6&&firingobj.parentNode.className=="menuitems"){ 
if (ns6&&firingobj.parentNode.className=="menuitems") firingobj=firingobj.parentNode 
if (firingobj.getAttribute("target")) 
window.open(firingobj.getAttribute("url"),firingobj.getAttribute("target")) 
else 
window.location=firingobj.getAttribute("url") 
} 
} 
 
if (ie5||ns6){ 
menuobj.style.display='' 
document.oncontextmenu=showmenuie5 
document.onclick=hidemenuie5 
}

Frame Inferior...

Código PHP:

  <html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>PIE DE PAGINA</title> 
<link href="../css/inferior.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="ie5menu" class="skin0" onMouseover="highlightie5(event)" onMouseout="lowlightie5(event)" onClick="jumptoie5(event)" display:none> 
<div class="menuitems" url="#">Item 1</div> 
<div class="menuitems" url="#">Item 2</div> 
<div class="menuitems" url="#">Item 3</div> 
<div class="menuitems" url="#">Item 4</div> 
<div class="menuitems" url="#">Item 5</div> 
<div class="menuitems" url="#">Item 6</div> 
<hr /> 
<div class="menuitems" url="#">Item 7</div> 
</div> 
<script type="text/javascript" src="../libreria/contextual.js"></script> 
</body> 
</html>

cmarrero · #2 (**permalink**) 19/09/2008, 14:29

Me faltaba agregar el archivo de CSS que muestra el menu contextual...

Código PHP:

  .skin0{
position:absolute;
width:200px;
border:1px solid black;
background-color: #C0C0C0;
font-family:Verdana;
line-height:20px;
cursor:default;
font-size:12px;
color:#333333;
z-index:100;
visibility:hidden;
}

.menuitems{
padding-left:10px;
padding-right:10px;
}