Foros del Web » Diseño web » HTML »

Menu horizontal con submenu desplegable

Estas en el tema de Menu horizontal con submenu desplegable en el foro de HTML en Foros del Web. Hola gente, estoy tratando de hacer un menu horizontal desplegable, la idea es que cuando se pase el mouse por encima de un menu se ...
  #1 (permalink)  
Antiguo 22/05/2007, 11:03
 
Fecha de Ingreso: mayo-2007
Mensajes: 54
Antigüedad: 6 años, 10 meses
Puntos: 1
Menu horizontal con submenu desplegable

Hola gente,

estoy tratando de hacer un menu horizontal desplegable, la idea es que cuando se pase el mouse por encima de un menu se despliegue un submenu.
Aca les mando el codigo:

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function mostrar() {
	menu.style.visibility  = "visible";
}
function ocultar() {
	menu.style.visibility = "hidden";
}
</script>
</head>

<body>
<table width="400" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <!--DWLayoutTable-->
  <tr>
    <td width="100" height="20" valign="top" bgcolor="#FFFFFF" onmouseover="mostrar()">Menu 1</td>
    <td width="100" valign="top" bgcolor="#FFFFFF">Menu 2</td>
    <td width="100" valign="top" bgcolor="#FFFFFF">Menu 3</td>
    <td width="100" valign="top" bgcolor="#FFFFFF">Menu 4</td>
  </tr>
</table>
<table id="menu" width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" style=" visibility: hidden">
  <!--DWLayoutTable-->
  <tr>
	<td onmouseout="ocultar()">
		<table width="100" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000">
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 1</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 2</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#FFFFFF">Submenu 3</td>
		  </tr>
		</table>
	</td>
  </tr>
</table>

</div>
</body>
</html>
El problema que estoy teniendo es que cuando paso el mouse por encima de Menu1 se me despliega el menu pero cuando
quiero ir al submenu, éste se oculta.
He mirado muchos menus y son muy dificiles de seguir por la gran cantidad de codigo, entonces quize empezar a hacerlo desde cero
pero tengo el problema anterior, alguna idea de que puede ser y como solucionarlo?

desde ya muchas gracias
  #2 (permalink)  
Antiguo 22/05/2007, 11:58
 
Fecha de Ingreso: mayo-2006
Mensajes: 474
Antigüedad: 7 años, 11 meses
Puntos: 58
Re: Menu horizontal con submenu desplegable

Hola coboledo. Normalmente los menus desplegable suelen hacerse con capas ya que el borde y el espacio entre celdas no son reconocidos en las funciones onMouse... y se producen esos saltos (que me corrigan si me equivoco). Prueba de esta manera.
Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript">
function mostrar() {
	menu.style.visibility  = "visible";
}
function ocultar() {
	menu.style.visibility = "hidden";
}
</script>
</head>

<body>
<table width="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
  <tr>
    <td width="100" height="20" valign="top" bgcolor="#996600" onMouseOver="mostrar()"  onMouseOut="ocultar()" >Menu 1</td><!--Si el mouse esta encima muestra la tabla menu, si está fuera la oculta.  Importante para que no se vea al ir cambiando de menu1 a menu2, menu3...etc-->
    <td width="100" valign="top" bgcolor="#99FF33">Menu 2</td>
    <td width="100" valign="top" bgcolor="#FF9900">Menu 3</td>
    <td width="100" valign="top" bgcolor="#0099FF">Menu 4</td>
  </tr>
</table>
<table id="menu" width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" onMouseOut="ocultar()"  onMouseOver="mostrar()" style="visibility:hidden"><!--Si el mouse está encima sigue mostrando la tabla menu, si está fuera la oculta -->
  <tr>
	<td >
		<table width="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#CC99FF">Submenu 1</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#FFFF99">Submenu 2</td>
		  </tr>
		  <tr>
		    <td width="100" height="20" valign="top" bgcolor="#CC0000">Submenu 3</td>
		  </tr>
		</table>
	</td>
  </tr>
</table>

</div>
</body>
</html> 
de todas formas comentarte que, ya que usas Dreamweaver, es más fácil realizar los menús con capas y utilizar el comportamiento mostrar - ocultar capas.
  #3 (permalink)  
Antiguo 22/05/2007, 12:22
 
Fecha de Ingreso: mayo-2007
Mensajes: 54
Antigüedad: 6 años, 10 meses
Puntos: 1
Re: Menu horizontal con submenu desplegable

Muchisimas gracias por responder, ya habia provado con capas y tenia el mismo problema y bueno... me faltaba poner el over y out (los dos juntos), gracias
  #4 (permalink)  
Antiguo 22/05/2007, 13:19
Avatar de Pablito  
Fecha de Ingreso: febrero-2007
Ubicación: Estoy frente a la pc!
Mensajes: 50
Antigüedad: 7 años, 1 mes
Puntos: 0
Re: Menu horizontal con submenu desplegable

sino con el dreamweaver CS3.. tiene la opcion para hacerlo directamente
  #5 (permalink)  
Antiguo 20/03/2010, 20:06
 
Fecha de Ingreso: marzo-2010
Mensajes: 9
Antigüedad: 4 años
Puntos: 0
Respuesta: Menu horizontal con submenu desplegable

http://www.araudi.net/ejemplos/menus_desplegables_CSS.html
hola cual es el codigoo html para que me realice la accion del ejemplo 5 , que contenga 5 o 6 menus verticales y que cada uno de ellos contenga 5 submenus con hipervinculos a otras paginas el del ejemplo 8 tambien porfavor
  #6 (permalink)  
Antiguo 21/03/2010, 04:20
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.440
Antigüedad: 11 años, 9 meses
Puntos: 360
Respuesta: Menu horizontal con submenu desplegable

Hola Sofia_25:

¿Te has dado cuenta de que el mensaje original tiene casi tres años? Por favor, no revivas temas tan antiguos, la próxima vez plantea tu pregunta en un tema nuevo, es mejor para tí.

Con respecto a tu pregunta, en el menú de tu navegador opción ver -> Ver código fuente.

Saludos.

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.
Tema Cerrado

SíEste tema le ha gustado a 2 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 09:53.
SEO by vBSEO 3.3.2