Comparte en Facebook Twitter Google+

Banner menú dinámico

Establecer un menú dinámico en nuestro proyecto web, nos permitirá abrir la posibilidad de cambiar la estructura web sin que esto afecte el diseño. En ocasiones podemos encontrarnos en la situación de crear un proyecto cuyas opciones de menú sean dinámicas o dependan directamente del contenido, en estos casos lo ideal es adaptar el proyecto para que el cambio en su estructura sea rápido y ágil con la creación de un menú dinámico.

En el siguiente tutorial exploraremos todos los pasos necesarios para crear dicho menú:

Creación del proyecto, tabla y datos

Se crea un nuevo proyecto en Laravel:

Se crea la migración de la tabla menus.

Nos queda de la siguiente forma:

Se intenta registrar en una única tabla (menus) todo el árbol de opciones que podamos necesitar en nuestro proyecto web, cada opción de menú podrá estar enlazada a una opción “padre” indicando el identificador (id) de la opción “padre” en el campo parent. En otras palabras, si tenemos una opción de segundo nivel que dependa o cuelgue de una opción superior, entonces, el valor del campo parent será el identificador id de la opción superior; y si se trata de una opción de nivel superior, es decir, que no depende de ninguna otra opción, el campo parent contendrá el valor 0. Veamos un ejemplo.

Diagrama menú

Así, la estructura de menú definida en la Figura 1 estará registrada en la tabla de la siguiente forma:

Tabla menu

Creemos una base de datos que albergue la información del proyecto e indicamos sus datos en el archivo .env. Por ejemplo:

Y en el archivo .env

Vamos a crear el Modelo:

Y ahora el seeder con la estructura definida en la Figura 1.

Añadimos el código necesario para definir las opciones de nuestro menú, según el ejemplo, en la nueva clase MenusTableSeeder ubicada en database/seeds/MenusTableSeeder.php.

En el ModelFactory ubicado en database/factories añadimos:

En el ejemplo que estamos trabajando hemos creado opciones fijas, pero si deseamos crear opciones aleatorias, por ejemplo, 5 opciones, podemos usar la siguiente instrucción en la función run de la clase MenusTableSeeder:

Volvamos a nuestro ejemplo. Ahora debemos incluir la llamada de nuestro nuevo seeder en la clase DatabaseSeeder que está ubicada en el directorio database/seeds:

Y ejecutamos las migraciones y el seeder:

Bien, ahora que ya tenemos nuestra tabla menus con la información que deseamos, procedemos a trabajar sobre la vista para ver su contenido.

Para dar algo de estilo a nuestro menú dinámico usaremos Bootstrap, aunque es posible usar cualquier framework de CSS o crear los estilos por nosotros mismos.

Tomamos los CDN de Bootstrap desde su página oficial.

Añadimos los CDN relacionado con los CSS dentro de la etiqueta <head> de nuestra vista resources/views/welcome.blade.php. El CDN de tipo JavaScript y la librería de JQuery que podemos encontrar en code.jquery.com, la incluiremos al final de nuestra vista welcome.blade.php, y justo antes del cierre de la etiqueta </body>.

Dentro de la etiqueta <body> añadimos el siguiente código:

Por otra parte, añadimos tres nuevas clases de estilos CSS para activar la visualización de las opciones del menú al deslizar el ratón sobre ella. Estos estilos deberán estar definidos dentro de la etiqueta <style>.

El resultado final sería el siguiente:

Organización del menú

Observemos con detalle el código anterior:

La sentencia @foreach hace referencia a la variable $menus, la cual la definiremos a través de una View Composer, lo incluiremos en la función boot de app/Providers/AppServiceProvider.

No olvidemos de añadir la clase Menu en la parte superior de AppServiceProvider.php.

Aquí vemos la llamada al método Menu::menus(). Para su funcionalidad necesitaremos otros dos métodos más, optionsMenu y getChildren, que también se encuentran en el modelo Menu.

Veamos el nuevo código del modelo app/Menu.php:

Observemos en detalle cada uno de ellos. Comencemos por el método menus() el cual es llamado por el View Composer.

Método menus()

El objetivo del método menus() es recorrer todas las opciones del menú y en aquellas opciones “padre” obtener sus “hijos” u opciones que dependerán de la opción principal, y éste grupo de ítems quedarán registrados en un array llamado submenú.

Método optionsMenu()

Retorna un array con las opciones del menú activas (enabled = 1) y ordenadas por parent, order y name.

Método getChildren()

Recorre el array $data para extraer los “hijos” (el valor del campo parent debe coincidir con el id de la opción superior).

Menú ítem

Si observamos nuevamente el código que se encuentra entre las etiquetas <nav> de nuestro welcome.blade.php, podremos observar la inclusión de un nuevo archivo llamado menu-item.blade.php.

Vamos a definirlo:

Se crea un nuevo directorio llamado “partials” dentro del menú resources/views, y ahora creamos el nuevo archivo llamado menu-item-blade.php con el siguiente contenido:

El objetivo principal de crear el archivo menu-item-blade.php separándolo del resto, es para utilizarlo en llamadas recursivas, de tal forma que podamos implementar cualquier número de niveles en el menú dinámico.

El código anterior principalmente muestra un condicional (@if) que permite discriminar si se está evaluando una opción con dependencias (submenú) o sin ella. En el caso de que la llave submenu no esté vacía, nuevamente se hará la inclusión del código menu-item-blade.php llamándose recursivamente a sí mismo hasta completar todos los niveles de nuestra estructura de menú.

Finalmente, podemos ver nuestro menú dinámico al acceder a http://localhost:

Resultado final menu

El código de este tutorial está disponible en Github.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.