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.

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í

GD Star Rating
loading...
Menu dinámico con PHP y CSS Drop-down menu framework, 7.0 out of 10 based on 28 ratings

Related Posts

18 Comments

  1. Masterweb
    mayo 29, 2009 at 9:31 pm

    Se ve interesante, deberias poner un enlace para la decarga del framework CSS y un ejemplo del resutao

    Gracias por el código.

  2. Juan Benitez
    mayo 31, 2009 at 5:05 pm

    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.

  3. Ariel Fernandez
    julio 4, 2009 at 11:40 am

    Necesito hacer un menu dinamico, pero del tipo (+) y (-) como el del explorador de windows. Gracias Ariel.

  4. Juan Benitez
    julio 5, 2009 at 1:19 am

    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.

  5. facundo
    septiembre 9, 2009 at 7:01 pm

    como hago para cargar el array con datos de una consulta mysql.
    Gracias

  6. Eduardo
    agosto 15, 2011 at 9:55 pm

    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

  7. admin
    agosto 28, 2011 at 11:10 pm

    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.

  8. eNIAC
    septiembre 15, 2011 at 1:01 pm

    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….

  9. admin
    septiembre 15, 2011 at 10:32 pm

    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.

  10. Pacma
    noviembre 16, 2011 at 5:13 pm

    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

  11. admin
    noviembre 22, 2011 at 12:17 am

    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/ :

  12. Juan
    junio 2, 2012 at 4:06 am

    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

  13. Juan
    octubre 25, 2012 at 2:04 pm

    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.

  14. admin
    octubre 27, 2012 at 6:45 pm

    Hola Juan, si es posible crear submenus a partir de uno principal y te será muy útil en tu caso.

  15. jhon
    abril 13, 2013 at 12:37 am

    hola, gracias x tu codigo, lo agregue a mi proyecto. use el bootstrap d twitter y me funciono bien.

  16. Luis
    junio 9, 2013 at 11:02 pm

    Hola quisiera hacerlo pero que aparezca si hay mas niveles en el menu

  17. Eduardo
    julio 6, 2013 at 8:19 pm

    Hola, muchas gracia por la información y el código. Tengo una duda que no he podido resolver aún habiendo investigado en varios sitios; es la siguiente:
    Si tengo un drop-down menú con varios elementos ¿cómo puedo guardar en una variable de php el valor seleccionado por el usuario?

  18. Luis Hilario
    noviembre 7, 2013 at 3:10 pm

    muy bueno tu ejemplo, una cosita mas, como haria para colorear el nombre del MENU_item cuando elija un sub_menu

    MUCHAS GRACIAS

  19. Gilberto García
    agosto 8, 2015 at 9:16 pm

    Estimado Ing. Juan:
    Tu ewjemplo es excelente. Mi duda, ya que es menú dinámico es obligatorio cargarlo a base de datos sql? según estiendo, ya es perfecto para usarlo solo con php. Cuando agregas varios links, se debe crear más submenus href=”#”>.$. dentro del ejemplo.php?

    mil gracias.

Leave A Comment

Security Code:

Leer entrada anterior
Mysql Workbench 5

Mysql Workbench, es una poderosa herramienta que nos ofrece la posibilidad de diseñar base de datos en forma visual, es...

Cerrar