Submenu o algo parecido

alparkomcom · #1 (**permalink**) 12/07/2010, 16:29

Hola, quiero saber como hago un submenu asi como los de forosdelweb.com, es como donde arriba de esto dice "Tus opciones" uno pincha y se abre un submenu, como se hace eso?

gracias ;)

maycolalvarez · #2 (**permalink**) 12/07/2010, 17:13

de muchas formas, pero básicamente con capas absolutas.

también se pueden hacer con solo CSS, pero por el lado de javascript tienes una amplia variedad como en frameworks como jQuery que te ofrecen plugins para crear menús rápidamente

briant14 · #3 (**permalink**) 12/07/2010, 17:44

Algo rapido...

Código HTML:

<html>
<head>
<style>
	.menu{
		border: 1px solid black;
		float: left;
		width: 100px;
		text-align: center;
		display: block;
		padding: 8px;
		text-decoration: none;
		color: black;
	}
	.submenu{
		border: 1px solid black;
		position: absolute;
		width: 120px;
		display: none;
	}
</style>
<script>

function mostrar(num,menu){
	var submenu = document.getElementById("submenu"+num);
	submenu.style.top = menu.offsetTop + menu.offsetHeight;
	submenu.style.left = menu.offsetLeft;
	submenu.style.display = 'block';	
}
function ocultar(num){
	var submenu = document.getElementById("submenu"+num);
	submenu.style.display = 'none';
}
</script>
</head>
<body>
	<a href="#" id="menu1" class="menu" onClick="mostrar(1,this);">Menu 1</a>
	<div id="submenu1" class="submenu" onMouseOut="ocultar(1);">
		<a href="#">Submenu 1</a>
		<a href="#">Submenu 2</a>
	</div>
	<a href="#" id="menu2" class="menu" onClick="mostrar(2,this);">Menu 2</a>
	<div id="submenu2" class="submenu" onMouseOut="ocultar(2);">
		<a href="#">Submenu 3</a>
		<a href="#">Submenu 4</a>
	</div>
</body>
</html>