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"> <?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.
Actualización, junio 2012.
Agregamos en el demo un ejemplo con el menú vertical ya que nos habían consultado varias veces por esa funcionalidad.
Más información:
http://www.lwis.net/free-css-drop-down-menu/
DEMO funcional:
Ver ejemplo del código aquí
16 Comentarios
Deja un comentario
Destacados
Anuncios
Síguenos también en…
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
hola amigo soy nuevo en esto y necesito ayuda, cree un ABC de departamentos de una empresa y necesito que se borren de un menu y aparescan?? puedes ayudarme
no se si entiendo bien que es lo que precisas… si con el ABM borras o creas nuevos departamentos y si el menu se carga dinamicamente no deberias tener problemas… si puedes explicar mejor tu problema no tengo inconveniente en ayudarte.
saludos.
Hola muy bueno el ejemplo… quisiera saber como harias sub menu del submenu perro???? y como lo harias con variables haciendo una consulta mysql desde ya muchas gracias….
Hola, como veras los menus se componen de elementos en listas, es decir, UL -> LI y cada submenu es una nueva lista anidada, por lo tanto si quieres generar mas submenues debes anidar tantas listas como necesites.
ej:
UL-> LI Menu 1
-> LI Menu 2
UL -> LI Submenu 2.1
UL->LI Submenu 2.1.1
Respecto a la 2da parte de tu pregunta, lo que tienes que hacer es cargar apropiadamente los arrays que contienen los menus con el resultado de tu consulta SQL, para que quede mas claro te dejo un bosquejo de codigo a modo de guia:
saludos.
Hola acabo de ver tu aportacion pero tengo una duda, copie el codigo de ejemplo ke pusiste en un archivo .php sin embargo no veo el menu dinamico, solo el texto plano, tambien ya descarque el framework. mi duda es, como se debe de instalar, o en donde debe de ir la carpeta ke viene en formato zip?. ¿debe tener algun nombre especifico la caperta? gracias, saludos
Hola, bueno primero debes descomprimir el zip, la carpeta puede tener el nombre que tu quieras… lo relevante es importar los archivos CSS que descomprimiste en tu codigo HTML.
Ejemplo, suponiendo que la carpeta se llame css/dropdown/ :
Actualización del ejemplo: agregamos en el demo un menú vertical ya que no han preguntado varias veces si era posible hacerlo.
Revisen en demo: Menu de ejemplo
El ejemplo se presta para crear un submenu a partir de un menú principal?. La información la tengo en BD, Por ejemplo, tener un menú mostrando una categoría de producto, que me genere luego de hacer click un submenu de sus subcategoria. Información que me daría la fuente para seleccionar los productos en la BD, para luego gestionarlos. Disculpa, no soy un experto en estas lides, pero estoy seguro que puedes ayudarme. Muchas Gracias.
Hola Juan, si es posible crear submenus a partir de uno principal y te será muy útil en tu caso.
hola, gracias x tu codigo, lo agregue a mi proyecto. use el bootstrap d twitter y me funciono bien.
Hola quisiera hacerlo pero que aparezca si hay mas niveles en el menu