Foros del Web » Creando para Internet » HTML »

Superponer Menu Desplegable sobre iframe

Estas en el tema de Superponer Menu Desplegable sobre iframe en el foro de HTML en Foros del Web. Hola buenas Tardes Espero esten teniendo un excelente dia, mi pregunta es la siguiente tengo una pagina web que teieneun un menu en la parte ...
  #1 (permalink)  
Antiguo 09/07/2010, 17:25
 
Fecha de Ingreso: noviembre-2008
Mensajes: 80
Antigüedad: 9 años
Puntos: 1
Superponer Menu Desplegable sobre iframe

Hola buenas Tardes Espero esten teniendo un excelente dia, mi pregunta es la siguiente tengo una pagina web que teieneun un menu en la parte de arriba y un iframe en e lcual se mostrara la informacion que seleccione el usuario en el menu; pero mi menu es desplegable y al seleccionar una parte del menu este que por debajo del iframe de contenido y por ende no se puede ver. como hago para al desplegar el menu este quede sobre el iframe de contenido

Yo se que una solucion puede ser utilizar div, pero quiero saber si se puede hacer con iframe

de antemano agradezco su ayuda
  #2 (permalink)  
Antiguo 09/07/2010, 18:54
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Superponer Menu Desplegable sobre iframe

andresito12_19:

Mira este ejemplo:

http://foros.emprear.com/html/menu-i...nu-iframe.html

creo que es lo que buscas.
El modelo del menu lo podes bajar de

http://www.cssplay.co.uk/menus/dd_valid.html

Ese ejemlpo de menu es un poco exagerado, ahi mismo tinen una version más simple

Saludos
  #3 (permalink)  
Antiguo 09/07/2010, 19:02
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Superponer Menu Desplegable sobre iframe

Del mismo modo que en esos ejemplos puedes usar z-index en el menú.
  #4 (permalink)  
Antiguo 10/07/2010, 09:52
 
Fecha de Ingreso: noviembre-2008
Mensajes: 80
Antigüedad: 9 años
Puntos: 1
Respuesta: Superponer Menu Desplegable sobre iframe

Cita:
Iniciado por all-ill Ver Mensaje
Del mismo modo que en esos ejemplos puedes usar z-index en el menú.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ingreso al sistema</title>
<link rel="STYLESHEET" type="text/css" href="Css/estilos.css">
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="Calendario/jsDatePick_ltr.min.css" />
<script type="text/javascript" src="Calendario/jsDatePick.min.1.3.js"></script>
<style type="text/css">
//* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
#fondo {position:fixed; top:0; left:0;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
<?php
/*include_once "BasedeDatos/ConsultasDAO.php";
//buscar usuario y login en la base de datos
 $dao=new ConsultasDAO();
 if($_POST['usuario']!=null){
   $dao->buscar_con($_POST['usuario'],$_POST['login']);
  }*/
?>
</head>
<body>
<center>
<div id="fondo">
          <img src="images/fondop.jpg" style="width:100%; height:100%; position:fixed; z-index:-1;" />
     <div align="center" id="bg">
        <img   src="images/fondo5.png" width="1419" height="180"></div></center>
      <div id="bg">
       <img src="images/logo.png" width="194" height="90" style=" margin-top:20px;margin-left:20px">        </div>
        <div align="center" id="fondo">
     <img   src="images/Morelco/Imagen1.jpg" name="Fotos" align="right" width="300" height="150" id="Fotos" style=" margin-right:30px; margin-top:20px"></div>
       <script language="JavaScript">
         RunSlideShow("Fotos","images/Morelco/Imagen1.jpg;images/Morelco/Imagen2.jpg;images/Morelco/Imagen3.jpg;images/Morelco/Imagen4.jpg;images/Morelco/Imagen4.jpg",2);
       </script>
       </div>
     <div id="bg">
        <center><img src="images/letrero.png" width="500" height="200" style="margin-top:27px;margin-left:150px"></center>
</div>

     <div id="bg" style="margin-top:176px; z-index:1; ">
      <table width="1419" cellpadding="0" cellspacing="0" style=" z-index:1 ">
        <tr><td>
        <ul class="menu" id="menu">
        <li><a href="#" class="menulin"></a></li>
        <li><a href="#" class="menulink">Inicio</a>    </li>
    <li><a href="#" class="menulink">Nomina</a></li>
    <li>
        <a href="#" class="menulink">Facturacion</a>
        <ul>
            <li><a href="#" class="sub">Actas de liquidacion</a>
            <ul>
                    <li class="topline"><a href="#">ALP 01</a></li>
                    <li><a href="#">ALP 02</a></li>
                    <li><a href="#">ALP 03</a></li>
              </ul>
            </li>
            <li>
                <a href="#" class="sub">Orden de Trabajo</a>
                <ul>
                    <li class="topline"><a href="#">Nueva OT</a></li>
                    <li><a href="#" class="sub">Buscar OT</a></li> 
                </ul>
            </li>
            <li><a href="#" class="sub">Reportes</a>
            <ul>
                    <li class="topline"><a href="#">Ingresar Reporte</a></li>
                    <li><a href="#">Buscar Reporte</a></li>
              </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="menulink">Viaticos</a>
        <ul>
            <li><a href="#">Nuevo Viatico</a></li>
            <li><a href="#" class="sub">Buscar Viatico</a>
                <ul>
                    <li class="topline"><a href="#">Navigation Item 1</a></li>
                    <li><a href="#">Navigation Item 2</a></li>
                </ul></li>
        </ul>
    </li>
    <li>
        <a href="#" class="menulink">Personal</a>
        <ul>
            <li><a href="#">Ingresar H.V</a></li>
            <li><a href="#" class="sub">Buscar Personal</a>
            <ul>
                    <li class="topline"><a href="#">Buscar por Nombre</a></li>
                    <li><a href="#">Buscar por Cedula</a></li>
              </ul>
            </li>
            <li><a href="#">Actualizar H.V</a></li>
            <li><a href="#">Eliminar H.V</a></li>
        </ul>
    </li>
    <li><a href="#" class="menulin"></a></li>
</ul>
<script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>
</td></tr></table>
</div>
          <div id="content">
          <div id="div4_example" style="margin-top:300px; margin-left:3px"></div>
          <iframe width="800"></iframe>
        </div>
     </div>
</body>
</html>
ese es mi codigo de la pagina

este el es CSS del menu
Código PHP:
body {margin:25pxfont:13px Verdana,Arial;font-weightbold}
ul.menu {list-style:nonemargin:0padding:0border-spacing:0;background:url(images/prueba.png)}
ul.menu * {margin:0padding:0;background:url(images/prueba.png)}
ul.menu a {display:blockcolor:#000; text-decoration:none}
ul.menu li {position:relativefloat:leftmargin-right:0px;}
ul.menu ul {position:absolutetop:26pxleft:0background:#d1d1d1; display:none; opacity:0; list-style:none; margin-top:8px;}
ul.menu ul li {positionrelativeborder:0px solid #aaa; border-top:none; width:184px; margin:0}
ul.menu ul li a {display:blockpadding:12px 7px 5pxbackground-color:}
ul.menu ul li a:hover {background:url(images/men2.png)}
ul.menu ul ul {left:184pxtop:12px}
ul.menu .menulink border:none;padding:12px 6px 6pxfont-weight:bold;width:184px}
ul.menu .menulin border:none;padding:12px 6px 6pxfont-weight:bold;width:207px}
ul.menu .menulink:hoverul.menu .menuhover {background:url(images/men2.png)}
ul.menu .sub {background:url(images/prueba.png); 175px 8px no-repeat}
ul.menu .topline {border-top:1px solid white
y este es el JS del Menu
Código PHP:
var menu=function(){
    var 
t=15,z=50,s=6,a;
    function 
dd(n){this.n=nthis.h=[]; this.c=[]}
    
dd.prototype.init=function(p,c){
        
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.lengthi=0;
        for(
i;i<l;i++){
            var 
h=s[i].parentNodethis.h[i]=hthis.c[i]=s[i];
            
h.onmouseover=new Function(this.n+'.st('+i+',true)');
            
h.onmouseout=new Function(this.n+'.st('+i+')');
        }
    }
    
dd.prototype.st=function(x,f){
        var 
c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
        
clearInterval(c.t); c.style.overflow='hidden';
        if(
f){
            
p.className+=' '+a;
            if(!
c.mh){c.style.display='block'c.style.height=''c.mh=c.offsetHeightc.style.height=0}
            if(
c.mh==c.offsetHeight){c.style.overflow='visible'}
            else{
c.style.zIndex=zz++; c.t=setInterval(function(){sl(c,1)},t)}
        }else{
p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    }
    function 
sl(c,f){
        var 
h=c.offsetHeight;
        if((
h<=0&&f!=1)||(h>=c.mh&&f==1)){
            if(
f==1){c.style.filter=''c.style.opacity=1c.style.overflow='visible'}
            
clearInterval(c.t); return
        }
        var 
d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
        
c.style.opacity=oc.style.filter='alpha(opacity='+(o*160)+')';
        
c.style.height=h+(d*f)+'px'
    
}
    return{
dd:dd}
}(); 
  #5 (permalink)  
Antiguo 10/07/2010, 10:08
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Superponer Menu Desplegable sobre iframe

En tu código de ejemplo el menú ya te sale encima del iframe ¿no?
  #6 (permalink)  
Antiguo 10/07/2010, 10:11
 
Fecha de Ingreso: noviembre-2008
Mensajes: 80
Antigüedad: 9 años
Puntos: 1
Respuesta: Superponer Menu Desplegable sobre iframe

Cita:
Iniciado por all-ill Ver Mensaje
En tu código de ejemplo el menú ya te sale encima del iframe ¿no?
no ese es el detalle el menu sale por debajo de iframe
no se como hago ayudenme...
  #7 (permalink)  
Antiguo 10/07/2010, 10:26
 
Fecha de Ingreso: junio-2002
Mensajes: 751
Antigüedad: 15 años, 6 meses
Puntos: 22
Respuesta: Superponer Menu Desplegable sobre iframe

En firefox y chrome lo veo por encima aunque el menú tiene un fondo translúcido (se ve lo que hay debajo) aplicado mediante javascript con "opacity".

Por otra parte puedes comprobar la validación del código para corregir errores, pues hay <img /> sin cerrar y sin el atributo "alt", algún "id" repetido ("bg", "fondo")...
  #8 (permalink)  
Antiguo 10/07/2010, 10:27
 
Fecha de Ingreso: noviembre-2008
Mensajes: 80
Antigüedad: 9 años
Puntos: 1
Respuesta: Superponer Menu Desplegable sobre iframe

ya lo olucione michas gracias por la ayuda y el interes prestado

Etiquetas: desplegable, iframe, superponer
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 01:32.