Les dejo mi codigo para crear Menu y submenus

LOD_Fredy · #1 (**permalink**) 10/10/2010, 18:00

Probablemente muchos saben como crear un menu desplegable con submenus, no se si han puesto sus codigos. Sin embargo yo pongo el mio que esta exageradamente sencillo, si a caso lo mas complicado es la anidacion de capas y la posicion de cada una para que se vean correctamente.

Código HTML:

<html>
<head>
<title>Untitled</title>
<script>	
	var contador;
	function ver(ide,visible,submenu) {
		obj = document.getElementById(ide);
		if(visible)		
			obj.style.display = 'block';
		else
			obj.style.display ='none';
	}		
</script>
</head>
<body>
<!--Menu principal-->
<div id="menup">
	<table>
		<tr><td class="mpc"><a href="#" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false" >Partes PC</a></td>
		<td class="mjuegos"><a href="#" onMouseOut="ver('sjuegos',false,false); return false" onMouseOver="ver('sjuegos',true,true); return false">Juegos</a></td>
		<td class="mprogramas"><a href="#" onMouseOut="ver('sprogramas',false,false); return false" onMouseOver="ver('sprogramas',true,true); return false">Programas</a></td></tr>
	</table>
	
	<!--SubMenu PC-->
	<div id="spc" onMouseOut="ver('spc',false); return false" onMouseOver="ver('spc',true); return false" style="display:none;position:absolute; top:30px;">
		<table border="2px">
		<tr><td onMouseOut="ver('ssmemorias',false); return false" onMouseOver="ver('ssmemorias',true); return false"><a href="#">Memorias</a></div></td></tr>
		<tr><td onMouseOut="ver('sshd',false); return false" onMouseOver="ver('sshd',true); return false"><a href="#">HD</a></td></tr>
		</table>
		<!--SubMenu Memorias de SubMenu PC-->
		<div id="ssmemorias" onMouseOut="ver('ssmemorias',false); return false" onMouseOver="ver('ssmemorias',true); return false"  style="display:none;position:absolute; left:70px; top:5px;">
				<table>
				<tr><td><a href="#">DDR1</a></td></tr>
				<tr><td><a href="#">DDR2</a></td></tr>
				</table>
		</div>		
		<!--SubMenu HD de SubMenu PC-->
		<div id="sshd" onMouseOut="ver('sshd',false); return false" onMouseOver="ver('sshd',true); return false"  style="display:none;position:absolute; left:70px; top:30px;">
				<table>
				<tr><td><a href="#">IDE</a></td></tr>
				<tr><td><a href="#">SATA</a></td></tr>
				</table>
		</div>		
	</div>

	<!--SubMenu Juegos-->
	<div id="sjuegos" onMouseOut="ver('sjuegos',false); return false" onMouseOver="ver('sjuegos',true); return false" style="display:none;position:absolute; left:75px; top:30px;">
		<table>
		<tr><td onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false"><a href="#">Accion</a></td></tr>
		<tr><td onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false"><a href="#">Aventura</a></td></tr>
		</table>
		<!--SubMenu Accion de SubMenu Juegos-->
		<div id="ssaccion" onMouseOut="ver('ssaccion',false); return false" onMouseOver="ver('ssaccion',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
				<table>
				<tr><td><a href="#">Accion</a></td></tr>
				<tr><td><a href="#">Aventura</a></td></tr>
				</table>
		</div>
	</div>

	<!--SubMenu Programas-->
	<div id="sprogramas" onMouseOut="ver('sprogramas',false); return false" onMouseOver="ver('sprogramas',true); return false" style="display:none;position:absolute; left:120px; top:30px;">
		<table>
		<tr><td onMouseOut="ver('antivirus',false); return false" onMouseOver="ver('antivirus',true); return false"><a href="#">Antivirus</a></td></tr>
		<tr><td onMouseOut="ver('diseno',false); return false" onMouseOver="ver('diseno',true); return false"><a href="#">Diseno</a></td></tr>		
		</table>
		<!--SubMenu Antivirus de SubMenu Programas-->
		<div id="antivirus" onMouseOut="ver('antivirus',false); return false" onMouseOver="ver('antivirus',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
				<table>
				<tr><td><a href="#">Norton</a></td></tr>
				<tr><td><a href="#">Nod32</a></td></tr>
				<tr><td><a href="#">Avira</a></td></tr>
				</table>
		</div>
		<!--SubMenu Diseno de SubMenu Programas-->
		<div id="diseno" onMouseOut="ver('diseno',false); return false" onMouseOver="ver('diseno',true); return false" style="display:none;position:absolute; left:55px; top:0px;">
				<table>
				<tr><td><a href="#">Photoshop</a></td></tr>
				<tr><td><a href="#">PaintShop Pro</a></td></tr>
				</table>
		</div>
	</div>
</div>

</body>
</html>

Pueden agregar mas sub menus (claro si entienden la anidacion de las capas) aunque creo que son 2 sub menus seria mas que suficiente si hay muchas secciones en su pagina, yo por el momento no lo voy a utilizar por que mi pagina apenas empieza y no requiere de un menú de estos.

Debo decir que el menu esta muy sencillo aunque si puede llegar a confundir, igual y hay mejores scripts para hacer lo mismo pero por el momento esto me funciona y ojala a quien no tenga ni idea de como crear uno le sirva. Tambien le falta diseño, yo solo organice los menus y submenus en tablas separadas pero podrian estas en cada celda tener un fondo o una imagen que simule un boton (en vez de utilizar enlaces de texto) pero eso ya es otro asunto.

gumer · #2 (**permalink**) 10/10/2010, 21:34

Excelente homre, te salio genial, basico, simple, y mejorable, eso es lo importante... tenia uno q hacia lo miso pero recontra grande, usando estilos y funciones para aburrirse, le quise chequear pero me aburri jejejej... bueno bueno, felicidades y gracias por la ayuda.