aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Los menús son la parte más importante para complementar la información ofrecida a los usuario, con ellos conseguimos acercarles otras categorías, artículos anteriores,… gracias a ellos tenemos que conseguir que los usuarios se queden el máximo tiempo en nuestra web.

Por eso tenemos que innovar y ser más llamativos, gracias a moo.fx, la piedra angular en la que se basa mooTools, podrás hacer esto y conseguir unos menús animados y muy elegantes.

Requerimientos

• moo.fx (o MooTools con todas las demás herramientas)
• Imaginación

Código

Una vez ya integrados los ficheros Javascript necesarios de moo.fx (con Prototype.lite) solo nos queda crear nuestra estructura, en el ejemplo lo prueban con arrays en PHP, de forma que no es dificil cambiarlo para obtener los datos desde nuestra base de datos.

$array['colors']    = array('yellow', 'white', 'red', 'blue', 'green', 'brown');
$array['countries']['europe'] = '';
$array['countries']['europe']['western europe'] = array('belgium','germany','france');
$array['countries']['africa'] = array('bart', 'jef', 'koen', 'karel', 'bjorn', 'jente');
$array['cars']      = array('ford', 'nissan', 'toyota', 'bmw', 'audi', 'smart');

function printhtml($array)
	{
	static $i = 0;
	static $level = 0;
	$i++;	
	$level++;
	$tab = str_repeat("\t", $level);
		
	$checkbox = "<input type='checkbox'/>";

	if($i>1)
		{
		print("$tab<ul class='info'>\r");		
		}
	else
		{
		print("$tab<ul>\r");		
		}
		
	foreach ($array as $key => $item)
		{
		print("$tab<li>");
		if(is_array($item))
            {
            print("<span class='toggleinfo'>$key</span>\r");			
            printhtml($item);
			$indent = true;
            }
		else
			{
			print("<span>$checkbox $item</span>");
			$indent = false;
            }
			
		if($indent==true)
			{
			print("$tab</li>\r");
			}
		else
			{
			print("</li>\r");
			}
		}
	$level--;
	print("$tab</ul>\r");
	}
	
printhtml($array);

Como podemos ver se está creando un array de 3 posiciones ( colors, countries, cars) y cada uno de ellos incluye dentro de si uno o más arrays, creando la estructura que modemos ver en el ejemplo.

Y nuestro javascript quedaría de la siguiente forma

var infoToggleDuration = 200;

function addEvent(obj, evType, fn, useCapture){
  if (obj.addEventListener){
    obj.addEventListener(evType, fn, useCapture);
    return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be attached");
  }
};
	
var infoPanes = function() {	
	document.getElementsByClassName('info').each( 
		function(element){ 	
			element.fx = new fx.Height(element, {duration: 200, onComplete: function(){
			if (element.offsetHeight > 0) element.style.height = "auto";}});
			element.fx.hide();			
		}
	);
	
	document.getElementsByClassName('toggleinfo').each(
		function(element){ 
			element.onclick = function() {
				Element.find(element, 'nextSibling').fx.toggle();
				if(element.style.backgroundImage == 'url(min.gif)')
					{
					element.style.backgroundImage = 'url(plus.gif)';
					}
				else
					{
					element.style.backgroundImage = 'url(min.gif)';
					}
			}
		}
	);
};

var supaInit = function() {
	infoPanes();
};
addEvent(window, 'load', supaInit, false);

De esta forma añadimos al evento onLoad del objeto window las opciones necesarias para tratar nuestro código generado desde el PHP. En resumidas cuentas, cuando termina de cargar la página lanza la función supaInit() y asu vez infoPanes() que es la función encargada de asignar los efectos animados y de despligue a nuestro arbol.

Opinion

Pese a ser muy elegante y bonito (para gustos lo colores) no soy de los que les gusten estas cosas, creo que es poco usable ya que el usuario se lo suele encontrar cerrado y no se vé a primera vista. Además un usuario la primera vez que lo vea quizas no sepa de que vaya y tarde algo en comprender que es lo que tiene que hacer. Creo que siempre es bueno tener cosas de estas para algún caso que pueda ser la mejor opción o lo que quiere el cliente, pero no lo usaré en ningún theme 😀