Menú desplegable al estilo Bing Imágenes

RabidFish · #1 (**permalink**) 12/04/2011, 11:49

Hola a todos.

Quería saber si alguien puede guiarme para armar un menú con listas y CSS de la forma que se ve aquí: http://www.bing.com/images/search?q=...=QBLH&filt=all al pulsar sobre DISEÑO, COLOR, etc. que se despliegan los submenúes. Supongo que necesito JavaScript, pero no tengo idea de cómo hacerlo, por eso recurro a ustedes. ¿Debería ser un div para cada palabra del menú y otro para el submenú que se oculte y aparezca al hacer clic?

Un saludo.

EDITADO: Al final logré encontrar ejemplos, se llaman menú acordeón.

laratik · #2 (**permalink**) 12/04/2011, 14:02

Efectivamente, al desactivar javascript la accesibilidad del menú se va.. completamente. Así que para realizarlo seria necesario más o menos esto:

Código HTML:

<html> 
<head> 

<script>

function change() {
	var ul = this.getElementsByTagName("ul")[0];
	if(ul.style.display == "block") {
		ul.style.display = "none";
	} else {
		ul.style.display = "block";
	}
}

function cargar() {
	var li = document.getElementById("menu").childNodes;
	for(var i=0; i<li.length; i++) {
		li.item(i).onclick = change;
	}
}

window.onload = cargar;
</script> 
<style>
#menu {
	list-style: none;
	padding: 0;
}

#menu a{
	text-decoration: none;
	display: block;
	font: 14px Verdana, Geneva, sans-serif;
	padding: 5px;
	color: #000;
}

#menu a:hover {
	background: #CCC;
}

#menu li {
	width: 100px;
}

#menu li ul {
	display: none;
}

#menu ul {
	list-style: none;
	padding-left: 15px;
}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#">ITEM1</a>
	<ul>
    <li>subMenu1</li>
    <li>subMenu2</li>
    </ul></li>
<li><a href="#">ITEM2</a><ul>
    <li>subMenu1</li>
    <li>subMenu2</li>
    </ul></li>
<li><a href="#">ITEM3</a><ul>
    <li>subMenu1</li>
    <li>subMenu2</li>
    </ul></li>
</ul>
</body> 
</html>

Es algo que se me ha ocurrido rápidamente, para no ensuciar demasiado el HTML y utilizar un poco el DOM.