Menu dinámico con PHP y CSS Drop-down menu framework
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/
Tags: css, desarrollo, framework, Php, programacion
Se ve interesante, deberias poner un enlace para la decarga del framework CSS y un ejemplo del resutao
Gracias por el código.
Gracias por tu comentario, como verás al final del artículo tienes un link al sitio del framework donde puedes encontrar un botón “Download” y además agregamos un link para que puedas ver un ejemplo del código.
saludos, Juan.
Necesito hacer un menu dinamico, pero del tipo (+) y (-) como el del explorador de windows. Gracias Ariel.
Hola Ariel, primero que nada te damos gracias por tu comentario ya que a raíz de tu consulta creamos un artículo que explica una de las formas de generar el tipo de menú que tu quieres. Lo puedes leer en el siguiente enlace:
http://www.tecnopedia.net/php/tree-menus-con-php/
saludos, Juan.
como hago para cargar el array con datos de una consulta mysql.
Gracias