Foros del Web » Programando para Internet » Javascript »

Menú desplegable al estilo Bing Imágenes

Estas en el tema de Menú desplegable al estilo Bing Imágenes en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/04/2011, 11:49
 
Fecha de Ingreso: julio-2008
Ubicación: Córdoba, Argentina
Mensajes: 266
Antigüedad: 14 años
Puntos: 26
Menú desplegable al estilo Bing Imágenes

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.

Última edición por RabidFish; 12/04/2011 a las 13:20
  #2 (permalink)  
Antiguo 12/04/2011, 14:02
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 12 años, 1 mes
Puntos: 63
Respuesta: Menú desplegable al estilo Bing Imágenes

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.
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.

Última edición por laratik; 12/04/2011 a las 14:41

Etiquetas: bing, desplegable, estilo
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:12.