En esta oportunidad quiero presentarles el framework CSS Drop-down menu para crear menus desplegables y como podemos usarlo para generar menus en forma dinámica con PHP.

La ventaja de usar este framework es que nos evita el uso de javascript, flash u otro tipo de tecnología para crear menus. Usando CSS hacemos que nuestro sitio sea más compatible con los estándares web y por lo tanto más accsesible para navegadores y usuarios. Además, aumenta la eficiencia y velocidad del sitio ya que no se sobre carga con librerías javascript.

Otro aspecto a favor es que CSS Drop-down menu esta bajo licencia GPL por lo que podemos usarlo, contribuir y mejorar el proyecto.

Debido a que CSS Drop-down menu se basa en los tags ul y li para crear las diferentes partes del menu, es realmente útil cuando queremos generar el menu dinámicamente, es decir, cuando las opciones se cargan por ejemplo, desde una base de datos y por lo tanto lo único que tenemos que generear es código HTML puro.

Otra ventaja del framework es que nos permite cambiar el layout del menu simplemente incluyendo el archivo CSS correspondiente y cambiando la clase CSS usada en el tag ul principal; de igual forma podemos cambiar la apariencia mediante themes lo que nos provee de gran flexibilidad a la hora de ajustar los menus a nuestras necesidades.

Como punto en contra, no podemos dejar pasar el hecho de que usa un mínimo de javascript para que los menus puedan visualizarse de forma correcta en IE 6 y sus anteriores versiones.

Bueno, presentado el framework, vamos a pasar a ver un ejemplo sencillo y claro sobre como implementar el menú dinámico con PHP.
Lo primero que debemos hacer es descargar el framework CSS y descomprimirlo en nuestra carpeta de trabajo.

<ul id="nav" class="dropdown dropdown-vertical">
 <?php
 
$menu[] = array('Colores' => array('Rojo', 'Verde', 'Azul') );
$menu[] = array('Animales' => array('Perro', 'Gato', 'Conejo') );
 
foreach ($menu as $menu_key => $menu_item){
	foreach($menu_item as $menu_name => $sub_menu){
		echo "<li><a href='#'>".$menu_name."</a>";
		if (isset($sub_menu)){
			echo "<ul>";
			foreach($sub_menu as $items){
				echo "<li><a href='#'>".$items."</a>";
			}
			echo "</ul>";
		}
		echo "</li>";
	}
}
 
?>
</ul>

Para este ejemplo, usamos un array pre cargado con las opciones del menú, pero es claro que en general serán cargadas desde otras fuentes (base de datos, archivos, etc.). La idea básica es iterar el array de acuerdo a la estructura de nuestro menú e ir generando las etiquetas ul y li .

Obviamente, la complejidad del menú depende de los requerimientos de la aplicación o del sitio que estemos desarrollando, por ejemplo se podría agregar información en el array para cada opción del menú, por ejemplo la url, la clase, etc.; sin embargo, este ejemplo abre los caminos para crear todo tipo de menus.

Más información:
http://www.lwis.net/free-css-drop-down-menu/

Ver ejemplo del código aquí

Pocos días atrás Mozilla Labs revelo la versión 0.1 de su proyecto experimental llamado Bespin, se trata de un Framework basado en Web para edición de código, por ahora soporta las funciones básicas (coloreo de sintaxis para Javascript, HTML, CSS; importación/ exportación de proyectos, etc.) pero realmente se ve muy prometedor.
La gente de Mozilla liberó el código fuente bajo la licencia MPL e invitan a los desarrolladores a colaborar con el proyecto.
Según sus creadores la aplicación implementa algunas etiquetas de la nueva versión de HTML 5 que les han permitido generar una mejor experiencia para el usuario.
Si quieres ver el video introductorio (en inglés) puedes hacerlo desde aquí, lo recomendamos ya que muestra varias características interesantes adicionales.

Por mas información https://bespin.mozilla.com/