1

Quiero hacer un menú dinámico que :

Muestre sus respectivos <li>sin mostrar sus hijos.

Al hacer hoveren cualquier <li>padre muestre el <ul> + <li> hijos

Obteniendo los datos $var o strings traidos de una base de datos


En la base de datos, tengo:

Una tabla para "marcas" y una tabla para "productos" Las cuales utilizo para el filtrado de búsqueda por marcas o por %LIKE.

<li>Placas de video</li>

  • Primer click/hover > MSI / GEFORCE etc..
  • Segundoclick >> lleva a una busqueda con LIKE %msi% (sin hoverya que no se necesita mostrar nada)
  • Tabla marcas:

    CREATE TABLE `marcas` (
     `id_marca` int(50) NOT NULL,
     `marca` varchar(50) NOT NULL
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    ALTER TABLE `marcas`
      ADD PRIMARY KEY (`id_marca`),
      ADD UNIQUE KEY `id_marca` (`id_marca`);
    

    Tabla productos:

     CREATE TABLE `productos` (
       `id_producto` int(50) NOT NULL,
       `codigo_p` varchar(50) NOT NULL,
       `id_marca` int(50) NOT NULL,
       `nombre` varchar(100) DEFAULT NULL,
       `presentacion` varchar(100) DEFAULT NULL,
       `precio` decimal(7,2) DEFAULT NULL,
       `iva` decimal(7,2) NOT NULL DEFAULT 0.21,
       `ivatotal` decimal(7,2) DEFAULT NULL,
       `preciototal` decimal(7,2) DEFAULT NULL,
       `tags` varchar(200) DEFAULT NULL,
       `foto` varchar(50) DEFAULT NULL,
       `descripcion` text NOT NULL,
       `stock` varchar(2) NOT NULL DEFAULT 'Si'
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
    
    //  Indices de la tabla `productos`
    
     ALTER TABLE `productos`
       ADD PRIMARY KEY (`id_producto`),
       ADD UNIQUE KEY `id_producto` (`id_producto`),
       ADD KEY `codigo_p` (`codigo_p`),
       ADD KEY `ps_marcas` (`id_marca`),
       ADD KEY `ps_tags` (`tags`);
     ---
     ALTER TABLE `productos`
       MODIFY `id_producto` int(50) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=0;
    
     // Exportado con PHPMYADMIN (xampp/localhost)
    

    ¿Cual seria la mejor forma de elaborar el menu multinivel con datos de la BD utilizando PHP?


    Aclaración:

    Estos "padres" e "hijos" tienen vinculos con "productos". Los cuales se mostraron al hacer click o ingresar en categoria o subcategoria

    Estoy utilizando bootstrap asi que el HTML para el/los items seran:

    <li class="nav-item">
    
    8
    • 2
      No termina de quedarme claro cuál es el problema que quieres resolver: ¿quieres cambiar la base de datos? ¿Quieres leer datos para luego mostrarlos? ¿Quieres crear un menú? . Quizás se entendería mejor si añadieses más información sobre las tablas que tienes y su relación, así como lo que hayas intentado y con que problemas/dificultades te estés encontrando.
      – Alvaro Montoro
      Commented el 27 ene. 2018 a las 12:30
    • @AlvaroMontoro ya edite mi pregunta. Agregue las 2 tablas por el momento que creo necesarias para la creación del menu. (Es posible que necesite re-estrucutrarlo). El menu quiero que se genere con datos de la base de datos
      – Juan
      Commented el 27 ene. 2018 a las 16:34
    • Por favor enfoca un poco tu pregunta a un problema en especifico. Concuerdo con @AlvaroMontoro no me queda claro que quieres exactamente ya que leo tu pregunta y es como ver 3 preguntas en 1
      – Eztronics
      Commented el 27 ene. 2018 a las 19:13
    • @Huskie ya edite mi pregunta. Hazme saber si todavía no queda claro.
      – Juan
      Commented el 27 ene. 2018 a las 19:19
    • 1
      Definitivamente ahora si quedó clara @Juan Dame unos minutos y te coloco mi respuesta
      – Eztronics
      Commented el 27 ene. 2018 a las 19:21

    2 respuestas 2

    2

    Podrías crear una tabla llamada "menu" con la siguiente estructura:

    CREATE TABLE IF NOT EXISTS `menu` (
      `menu_id` int(11) NOT NULL AUTO_INCREMENT,
      `menu_nombre` varchar(255) NOT NULL,
      `id_padre` int(11) NOT NULL DEFAULT '0',
      `link` varchar(255) NOT NULL,
      `estatus` enum('0','1') NOT NULL DEFAULT '1',
      PRIMARY KEY (`menu_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=12 ;
    

    Luego insertamos algunos valores de ejemplo:

    INSERT INTO `menu` (`menu_id`, `menu_nombre`, `id_padre`, `link`, `estatus`) VALUES
    (1, 'Pendrive', 0, '#', '1'),
    (2, 'Categoria2', 0, '#', '1'),
    (3, 'Categoria3', 0, '#', '1'),
    (4, 'Kingston', 1, 'pendrives/kingston', '1'),
    (5, 'marca1', 1, 'pendrives/marca1', '1'),
    (6, 'marca2', 1, 'pendrives/marca2', '1'),
    (7, 'marca3', 1, 'pendrives/marca3', '0'),
    (8, 'marcax', 2, 'categoria2/marcax', '1'),
    (9, 'marcab', 3, 'categoria3/marcab', '1'),
    (10, 'marcag', 3, 'categoria3/marcag', '1'),
    (11, '8GB', 3, 'pendrives/kingston/8gb', '1'),
    

    Explico uno a uno los campos de la tabla:

    menu_id: Es un autoincremental que diferenciará cada elemento de la tabla menú

    menu_nombre: Es el nombre que el usuario verá dentro del menú. Ejemplo: Pendrive->Kingston->8GB (tanto pendrive como kingston y 8GB son los nombres que mostrará el menú multinivel)

    id_padre: Es la clave para que el menú se haga dinámico. Este campo indicará si el registro en cuestión es "hijo" o no de algún otro registro presente en la tabla menú.

    A) Por defecto para mostrar los elementos que conforman la raíz del menú (el nivel 1) se debe colocar el id_padre en "0"

    B) Si tenemos por ejemplo el registro (4, 'Kingston', 1, 'pendrives/kingston', '1'), vemos que el parent_id es "1" esto quiere decir que "Kingston" es hijo de "Pendrive" cuyo parent_id es justamente "1". Igualmente para el resto de la tabla

    link: Es la dirección del formulario o de la "vista" que mostrarás cuando el usuario de click dentro del menú en algún nombre en especifico.

    estatus: Tendrá valor "0" o "1". Si está inactivo será "0" (no lo ve el usuario por algún propósito en particular) si está activo (lo puede ver el usuario) es "1"

    Con respecto al php asociado a crear el menú dinámicamente tenemos lo siguiente:

    function crear_menu($id_padre) 
    { 
    // En esta línea va la conexión a tu base de datos, es decir, la cadena de conexión.
    $menu = ""; // Vaciamos la variable menú 
    $consulta = " SELECT * FROM menu where estatus='1' and id_padre=$id_padre"; 
    $resultado=mysqli_query($con,$consulta); 
    while($row=mysqli_fetch_array($resultado,MYSQLI_ASSOC)) 
    { 
    $menu .="<li><a href='".$row['link']."'>".$row['menu_nombre']."</a>"; 
    
    $menu .= "<ul>".crear_menu($row['menu_id'])."</ul>"; //LLamada recursiva para generar todos los niveles del menú 
    
    $menu .= "</li>"; 
    
    } 
    
    return $menu; 
    }
    

    La función anterior es para generar el menú dinámicamente con un método recursivo con base al id_padre. Esta función la agregas en donde tengas tus otras funciones y sencillamente la llamas en la vista donde quieras generar el menú de la siguiente forma:

    <ul>
       <?php echo crear_menu(0); ?> 
    </ul>
    

    Nota: Siempre pasamos parametro "0" a la función para que esta genere el menú desde el primer nivel o la base que son aquellos elementos que no poseen padres o se pueden llamar también elementos raíz.

    1
    • Chat @huskie
      – Juan
      Commented el 28 ene. 2018 a las 17:45
    0

    Tuve curiosidad si era existia ya que nunca había visto ese comportamiento. Pense de en hacerlo pero ya W3school lo tenia hecho asi que lo publico para ti:

    $(document).ready(function(){
      $('.dropdown-submenu a.test').on("click", function(e){
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
    .dropdown-submenu {
        position: relative;
    }
    
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
       <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">HTML</a></li>
          <li><a tabindex="-1" href="#">CSS</a></li>
          <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
              <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
              <li class="dropdown-submenu">
                <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">3rd level dropdown</a></li>
                  <li><a href="#">3rd level dropdown</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    Esto lo que hace es aplicarle la posicion relativa a los hijos de los hijos de los dropdown y moverlos un 100% a la izquierda para que no se solapen. El jquery hacer un toggle sobre si mostrar/ocultar el ul nieto. Recuerda que tienes que agregar las clases css que hay explicitas para que te funcione.

    1
    • Gracias @Einer , cuando solucione el tema de la base de datos, armare la estructura con ese código.
      – Juan
      Commented el 27 ene. 2018 a las 16:36

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.