En Esta ocasión les mostrare como es que he usado un archivo JSON para generar un menú dinámico en cierto proyecto web que se me había asignado.

El Archivo JSON tiene la estructura mostrado, donde defino el grupo de opciones, las sub-opciones y los parámetros necesarios. Puedes añadirle parámetros adicionales según vuestra necesidad.

Para crear el JSON utilice PHP, El código es el siguiente:

<?php
$menu = array(
    array(
        'label_group' => ' Nombre del grupo de subopciones 1',
        'sub_options' => array(
            array(
                'id' => 'id suboption',
                'label' => 'label suboption',
                'src' => 'URL a la que apunta la subopcion'
            )
        ),
    ),


    array(
        'label_group' => ' Nombre del grupo de subopciones 2',
        'sub_options' => array(
            array(
                'id' => 'id suboption',
                'label' => 'label suboption',
                'src' => 'URL a la que apunta la subopcion'
            )
        ),
    ),


    array(
        'label_group' => ' Nombre del grupo de subopciones 3',
        'sub_options' => array(
            array(
                'id' => 'id suboption',
                'label' => 'label suboption',
                'src' => 'URL a la que apunta la subopcion'
            )
        ),
    )
   
);


// Convertimos el array en un archivo JSON
$Json_menu = json_encode($menu);
//  Ruta del archivo incluyendo nombre con el que se guardará
$path='App/Web/assets/menu.json';
//Se guarda el archivo JSON
$bytes = file_put_contents($path, $Json_menu);

?>

Dando como resultado el siguiente JSON:

[
    {
      "label_group": "Opcion 1",
      "sub_options": [
        {
          "id": "suboption 1",
          "label": "Option name",
          "src": "URL a la que apunta"

        },
        {
            "id": "suboption 2",
            "label": "Option name",
            "src": "URL a la que apunta"
          }
      ]
    },
    {
      "label_group": "Opcion 2",
      "sub_options": [
        {
          "id": "id sub_option 1",
          "label": "label suboption",
          "src": "URL a la que apunta",
        },
        {
            "id": "id sub_option 2",
            "label": "label suboption",
            "src": "URL a la que apunta",
          },
          {
            "id": "id sub_option 3",
            "label": "label suboption",
            "src": "URL a la que apunta",
          },
      ]
    }
  ]

Importante: Podemos agregar otros elementos a nuestro archivo JSON tal como : estado, rol (indicando al rol o roles a los que aplica dicha opción.

 

Una vez que tenemos nuestro JSON lo procesamos de la siguiente manera (atención a los comentarios en el código): 

<?php
/** 1. El archivo solo le leera una vez desde el disco duro, una vez lo obtengamos lo guardaremos en una variable de sesión. */ 

    //validamos si no existe la variable
        if (!isset($_SESSION['menu'])) {
    //validamos si existe el archivo
            if (file_exists('App/Web/assets/menu.json')) {
                // Cargamos el archivo JSON  donde guardamos el menú
                $jsonMenu = file_get_contents('App/Web/assets/menuSpeedyConnect.json');
                // validamos si tiene datos
                if (!empty($jsonMenu)) {
                    //lo vconvertimos a un arreglo asociativo
                    $jsonMenu = json_decode($jsonMenu, true);
                    // creamos la variable de sesión y almacenamos el menu en esa variable 
                    $_SESSION['menu'] = $jsonMenu;
                }
            }
        }

 /** 2.Comenzamos a leer el menu y a crear imprimirlo con el formato HTML apropiado para nuestro proyecto  */ 


 echo('<ul class="menu">');
 foreach ($_SESSION['menu'] as $option) {
    $suboptions = $option['sub_options'];
    if (count($suboptions) > 1) {
         //obtenemos la etiqueta para el grupo de opciones
        $label_group = $option['label_group'];
        $idMenu = $option['id'];
        //se imprime el HTML para cada opcion y sus subpciones
        echo('<li class="label_group"><span>' . $label_group . '</span>');
        echo('<ul class="submenu">');

        // se recorre cada subopcion
        foreach ($suboptions as $suboption) {
            $id = $suboption['id'];
            $url = $suboption['src'];
            $label = $suboption['label'];
        // se imprme la subopcion con su respectivo enlace
             echo('<li><a class="suboption " id="' . $id . '" href=" '.$url.'">' . $label . '</a></li>');
         
        }
        // se cierran las etiquetas HTML de cada submenu
        echo('</ul></li>');
       
    }
}
// cierra  las etiquetas HTML del menu
echo('</ul></li>');


?>

 

Espero pueda servirte la información proporcionada, en lo posible iré detallado mejor el proceso.

Déjame tus comentarios, que te ha parecido y si te ha sido útil la solución propuesta.