Foros del Web » Creando para Internet » HTML »

Menú desplegable sobre un marco

Estas en el tema de Menú desplegable sobre un marco en el foro de HTML en Foros del Web. Muy buenas, tengo un problemilla que me esta llevando de cabeza. Os comento: Tengo creado un menú desplegable, hecho con dreamweaver utilizando capas y eventos. ...
  #1 (permalink)  
Antiguo 05/11/2010, 09:00
 
Fecha de Ingreso: noviembre-2010
Mensajes: 7
Antigüedad: 13 años, 5 meses
Puntos: 0
Pregunta Menú desplegable sobre un marco

Muy buenas, tengo un problemilla que me esta llevando de cabeza.
Os comento:

Tengo creado un menú desplegable, hecho con dreamweaver utilizando capas y eventos. Eso lo tengo claro, pero el problema me viene porque me gustaria que cuando se despliegue el menú, lo haga sobre un marco de abajo.

Un ejemplo del efecto que quiero conseguir:
http://www.interflora.es/

Otro ejemplo sería mismamente esta web de forosdelweb...

utilizo dreamweaver 8 y he hecho varios cursillos sobre él, pero estoy creando una web y me gustaría que apareciera algo como el enlace que he dejado.

Espero que me puedan ayudar. 1 saludo y gracias de antemano.
  #2 (permalink)  
Antiguo 05/11/2010, 09:19
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.433
Antigüedad: 21 años, 10 meses
Puntos: 177
Respuesta: Menú desplegable sobre un marco

podriamos ver tu pagina o el codigo HTML/CSS eso nos sería de gran ayuda
Slds.-
__________________
Desarrollos dosLotos
Calendario Maya, Meditación, Osho
  #3 (permalink)  
Antiguo 05/11/2010, 09:40
Avatar de Facundo_Nahuel  
Fecha de Ingreso: noviembre-2010
Ubicación: Buenos Aires, Argentina
Mensajes: 32
Antigüedad: 13 años, 5 meses
Puntos: 3
Respuesta: Menú desplegable sobre un marco

Intenta darle al menú desplegado el atributo "position:absolute" con css. El elemento ser hermano de la opción del menú que lo desplega.
  #4 (permalink)  
Antiguo 05/11/2010, 14:07
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 15 años
Puntos: 3
Respuesta: Menú desplegable sobre un marco

Como bien dice Facundo_Nahuel prueba a añadir en el CSS: http://css.hazunaweb.com/213.php

Saludos.
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...
  #5 (permalink)  
Antiguo 05/11/2010, 14:26
 
Fecha de Ingreso: noviembre-2010
Mensajes: 7
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Menú desplegable sobre un marco

Hola de nuevo, ya tenia todas las capas asignadas como "position:absolute;" pero eso no me sirve.

Es que no tengo claro si he de crear otro marco, al que redirigir la información, o hacerlo sobre la misma ventana que tengo el menú. Por lógica tendría que crear un nuevo marco, y que el menú se antepusiera a éste al desplegarse.

Una cosa tal como la de ésta página web y su menú.

Os dejo el código que tengo del menú desplegable:


<!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>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
background-color: #00FFFF;
}
.Estilo1 {
color: #003399;
font-weight: bold;
font-style: italic;
}
#general {
position:absolute;
width:217px;
height:52px;
z-index:4;
left: 283px;
top: 18px;
}
#menu1 {
position:absolute;
width:108px;
height:132px;
z-index:2;
left: 283px;
top: 55px;
}
#menu2 {
position:absolute;
width:108px;
height:132px;
z-index:3;
left: 395px;
top: 57px;
}
#cierre {
position:absolute;
width:100%;
height:90%;
z-index:5;
left: 9px;
top: 14px;
}
#cierre {
position:absolute;
width:100%;
height:90%;
z-index:1;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/menu2sobre.jpg','images/menu1.jpg','images/menu1sobre.jpg','images/menu2.jpg')">

<p>&nbsp;</p>
<div id="general">
<div align="center">
<table width="224" border="1">
<tr>
<td width="104"><img src="images/menu1.jpg" alt="menu1" name="botmenu1" width="104" height="31" id="botmenu1" onmouseover="MM_swapImage('botmenu1','','images/menu1sobre.jpg',1);MM_swapImage('botmenu2','','ima ges/menu2.jpg',1);MM_showHideLayers('menu1','','show', 'menu2','','hide','cierre','','show')" /></td>
<td width="142"><img src="images/menu2.jpg" alt="menu2" name="botmenu2" width="104" height="31" id="botmenu2" onmouseover="MM_swapImage('botmenu2','','images/menu2sobre.jpg',1);MM_swapImage('botmenu1','','ima ges/menu1.jpg',1);MM_showHideLayers('menu1','','hide', 'menu2','','show','cierre','','show')" /></td>
</tr>
</table>
</div></div>
<div id="menu1">
<table width="100%" height="130" border="1" bgcolor="#00CCFF">
<tr>
<td><a href="http://www.marca.com/" target="mainFrame">texto1</a></td>
</tr>
<tr>
<td>texto2</td>
</tr>
<tr>
<td>texto3</td>
</tr>
<tr>
<td>texto4</td>
</tr>
</table>
</div>
<div id="menu2">
<table width="99%" height="131" border="1" bgcolor="#00CCFF">
<tr>
<td>contenido1</td>
</tr>
<tr>
<td>contenido2</td>
</tr>
<tr>
<td>contenido3</td>
</tr>
<tr>
<td>contenido4</td>
</tr>
</table>
</div>
<div id="cierre"><img src="images/shim.gif" width="746" height="338" onmouseover="MM_swapImage('botmenu1','','images/menu1.jpg',1);MM_swapImage('botmenu2','','images/menu2.jpg',1);MM_showHideLayers('menu1','','hide', 'menu2','','hide','cierre','','hide')" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">Esto es lo que quiero que se quede por debajo del menú. Con este texto si que funciona </p>
</body>
</html>

1 saludo y gracias por la ayuda.
  #6 (permalink)  
Antiguo 05/11/2010, 14:43
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 15 años
Puntos: 3
Respuesta: Menú desplegable sobre un marco

Ahora mismo debo irme pero si nadie te lo mira le echaré un vistazo en cuanto pueda, pero la próxima vez que pegues un código procura usar: [code ]Código[/ code] (sin espacios); asi se puede visualizar mejor y no ocupa medio tema.

Saludos :)
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...
  #7 (permalink)  
Antiguo 05/11/2010, 23:09
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 13 años, 6 meses
Puntos: 9
Respuesta: Menú desplegable sobre un marco

Hola, yo para crear menús desplegables te recomendaría una herramienta en Javascript como puede ser SuperFish. Este es un plugin para Jquery, que lo que hace es generarte menús desplegables a partir de listas creadas en HTML... de verdad que es muy sencillo de utilizar, y simplemente cambiando un poquito el CSS para cambiar el aspecto se consiguen grandes resultados...

La web del plugin es: http://users.tpg.com.au/j_birch/plugins/superfish/

Te lo bajas, y trasteas un poquito. Si te decides por usar este complemento, amablemente te resolveré las dudas que puedas tener.

Un saludo, y... a programar!!
  #8 (permalink)  
Antiguo 06/11/2010, 05:49
 
Fecha de Ingreso: noviembre-2010
Mensajes: 7
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Menú desplegable sobre un marco

Perdón por lo del código, soy nuevo en esto de los foros y no lo sabía.

Dargorg, gracias por la ayuda, pero lo que es el menú desplegable ya lo tengo hecho. Lo que no sé si me puede servir para lo que deseo realizar.

Tengo otro ejemplo para que entiendan el efecto que quiero sacar.

http://www.peugeot.es/web/

Supongo que está claro. Estoy a la espera de si alguien me puede ayudar o dar pistas de por donde salir de este embrollo...

gracias!
  #9 (permalink)  
Antiguo 06/11/2010, 06:18
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 13 años, 6 meses
Puntos: 48
Respuesta: Menú desplegable sobre un marco

Mmmmm... Yo utilizaría la directiva "z-index", le pondría un valor superior al menú, e inferior a la capa que quieres que quede por detrás.

Saludos.
  #10 (permalink)  
Antiguo 07/11/2010, 04:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Menú desplegable sobre un marco

Hola:

En las FAQ's de CSS hay varios ejemplos de menús desplegables hechos enteramente con CSS y sin javascript que siempre sobrecargará menos el sistema.

Saludos.

  #11 (permalink)  
Antiguo 08/11/2010, 11:56
 
Fecha de Ingreso: noviembre-2010
Mensajes: 7
Antigüedad: 13 años, 5 meses
Puntos: 0
Respuesta: Menú desplegable sobre un marco

Hola a todos, gracias por la ayuda y los consejos prestados. Ya lo he solucionado.

He utilizado un marco flotante y al desplegar el menú, este se antepone al marco flotante.

1 saludo a todos

Etiquetas: desplegable, marco
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 09:42.