Menu horizontal con submenu desplegable

cobolero_poseido · #1 (**permalink**) 22/05/2007, 11:03

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

jossss · #2 (**permalink**) 22/05/2007, 11:58

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.

cobolero_poseido · #3 (**permalink**) 22/05/2007, 12:22

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

Pablito · #4 (**permalink**) 22/05/2007, 13:19

sino con el dreamweaver CS3.. tiene la opcion para hacerlo directamente

Sofia_25 · #5 (**permalink**) 20/03/2010, 20:06

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

jomaruro · #6 (**permalink**) 21/03/2010, 04:20

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.