Ayuda Menú con Categorías Desplegables

eXtreM3 #1 Ene '10

Wenas!! Vamos a ver... he creado un menú con categorías y subcategorías a través de css + php y mysql. Las categorías y subcategorías están en una base de datos, la cual hay que consultar para mostrar el nombre de estas. El resultado es este:

Ahora me gustaría darle un poco de animación. Que aparecieran en el menú solamente los nombres de las categorías, tal que así:

Y al pinchar en cualquiera de las categorías, aparecieran todas sus subcategorías justo debajo, y las demás categorías se movieran hacia abajo. Por ejemplo si hiciéramos clic en Perfumerías, el resultado sería este:

He estado buena parte de la tarde investigando, con búsquedas tales como "dropdown menu jquery", he intentado implementar varios ejemplos pero no he sido capaz.

A ver si alguien me dice cómo hacerlo (me da igual si es javascript, jquery, o cualquier lenguaje), o qué buscar, algún enlace donde haya un tutorial bueno...

Gracias!!

Shendraf #2 Ene '10

Echa un vistazo a estos menús: http://www.dynamicdrive.com/dynamicindex1/

El que quizás más se parezca a lo que tú quieres es el modo acordeón

La mayoría están desarrollados con jQuery por lo que te será bastante útil si pretendes obtener los submenús de la base de datos

eXtreM3 #3 Ene '10

El que has puesto del acordeón es justo el efecto que estaba buscando. Mañana probaré a implementarlo y comentaré cómo me fue. Muxas gracias y wenas noxes ^^

eXtreM3 #4 Ene '10

Madre mía, me ha costado lo mío pero al final lo he conseguido.

Al final opté por este diseño:

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

El resultado sin modificar el css es este:

Queda bastante bien, el funcionamiento es el mismo que los spoilers de mv, si la categoría tiene algo sale un + al lado para desplegar, y si la despliegas sale un - para volver a cerrarla

Dejo por aquí el trocito de código por si a alguien le sirve alguna vez:

<?PHP
        // NO HAY NADA COMENTADO

$mostrar = mysql_query("SELECT idCategoria, nombre FROM categorias") or die ("Error mostrando");

while($row = mysql_fetch_row($mostrar)) //Recorremos todas las filas insertadas y las mostramos
{
	$conta = mysql_query("SELECT COUNT(idSubCategoria) FROM subcategorias WHERE idCategoria = $row[0]");
	$contamos = mysql_result($conta,0);
	
	if($contamos > 0)
	{
		$cont = mysql_query("SELECT idSubCategoria,nombre,nombreURL FROM subcategorias WHERE idCategoria = $row[0]");
		echo "<a class='menuitem submenuheader' href='#'>$row[1]</a>";
		echo "<div class='submenu'";
		echo "<ul>";
		
		while($cats = mysql_fetch_row($cont))
		{
			echo "<li>$cats[1]</li>";
		}
		
		echo "</ul>";
		echo "</div>";
	}
	else if($contamos == 0)
	{
		echo "<a class='menuitem' href='#'>$row[1]</a>";
	}
}
?>

Gracias de nuevo a #2 ^^

Ayuda Menú con Categorías Desplegables

Usuarios habituales

Tags