Skip to main content
Commonmark migration
Origen Enlace
  • El ul princpal debe llevar la clase sidebar-menu tree:

    El ul princpal debe llevar la clase sidebar-menu tree:

    <ul class="sidebar-menu tree" data-widget="tree">

<ul class="sidebar-menu tree" data-widget="tree">

  • Y los ul internos para cada li deben llevar la clase treeview-menu:

    Y los ul internos para cada li deben llevar la clase treeview-menu:

    <ul class="sidebar-menu">

<ul class="sidebar-menu">

  • El ul princpal debe llevar la clase sidebar-menu tree:

<ul class="sidebar-menu tree" data-widget="tree">

  • Y los ul internos para cada li deben llevar la clase treeview-menu:

<ul class="sidebar-menu">

  • El ul princpal debe llevar la clase sidebar-menu tree:

    <ul class="sidebar-menu tree" data-widget="tree">

  • Y los ul internos para cada li deben llevar la clase treeview-menu:

    <ul class="sidebar-menu">

Nueva información aportada sobre la etiqueta <ul>
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
  • el `ul` princpal debe llevar la clase:
    sidebar-menu tree
    • El ul princpal debe llevar la clase sidebar-menu tree:
  • y los `ul` internos para cada `li` deben llevar la clase:
    treeview-menu
  • <ul class="sidebar-menu tree" data-widget="tree">

    • Y los ul internos para cada li deben llevar la clase treeview-menu:

    <ul class="sidebar-menu">

  • el `ul` princpal debe llevar la clase:
    sidebar-menu tree
  • y los `ul` internos para cada `li` deben llevar la clase:
    treeview-menu
    • El ul princpal debe llevar la clase sidebar-menu tree:

    <ul class="sidebar-menu tree" data-widget="tree">

    • Y los ul internos para cada li deben llevar la clase treeview-menu:

    <ul class="sidebar-menu">

    Origen Enlace
    bypabloc_
    • 1.9k
    • 15
    • 46
    • 102

    ¿Como crear una lista con niveles indeterminados?

    Hace mas de 1 mes hice la siguiente pregunta: ¿Como creo ul y li con una función recursiva? y me fue resuelto el problema que tenia.

    Actualmente necesito hacer un menu con niveles indeterminados (el usuario es el que formara el menu, por tanto sus niveles).

    Ya creo la lista ul y li correctamente, el problema que se me presenta es que utilizo esta plantilla, y alli veo como forman el menu y se puede observar que:

  • el `ul` princpal debe llevar la clase:
    sidebar-menu tree
  • y los `ul` internos para cada `li` deben llevar la clase:
    treeview-menu
  • Y de la manera como lo creo actualmente coloca todos los ul con la clase: sidebar-menu tree.

    var todoMenus = {
      "menu": [
        {
          "id": 1,
          "id_padre": 0,
          "icono": "fa fa-dashboard fa-fw",
          "link": "/",
          "titulo": "Tablero"
        },
        {
          "id": 2,
          "id_padre": 0,
          "icono": "fa fa-tasks fa-fw",
          "link": "#",
          "titulo": "Procesos"
        },
        {
          "id": 3,
          "id_padre": 2,
          "icono": "fa fa-list-ol fa-fw",
          "link": "/lotes",
          "titulo": "Lotes"
        },
        {
          "id": 4,
          "id_padre": 2,
          "icono": "fa fa-eraser fa-fw",
          "link": "/limpieza",
          "titulo": "Limpieza"
        },
        {
          "id": 5,
          "id_padre": 2,
          "icono": "fa fa-stop fa-fw",
          "link": "#",
          "titulo": "Paradas"
        },
        {
          "id": 6,
          "id_padre": 2,
          "icono": "fa fa-wrench fa-fw",
          "link": "#",
          "titulo": "Mantenimiento"
        },
        {
          "id": 7,
          "id_padre": 6,
          "icono": "fa",
          "link": "/planes",
          "titulo": "Planes"
        },
        {
          "id": 8,
          "id_padre": 6,
          "icono": "fa",
          "link": "/calendario",
          "titulo": "Calendario"
        },
        {
          "id": 9,
          "id_padre": 0,
          "icono": "fa fa-file-text-o fa-fw",
          "link": "#",
          "titulo": "Reportes"
        },
        {
          "id": 10,
          "id_padre": 9,
          "icono": "fa fa-bar-chart-o fa-fw",
          "link": "/estadisticos",
          "titulo": "Estadisticos"
        },
        {
          "id": 11,
          "id_padre": 9,
          "icono": "fa fa-building-o fa-fw",
          "link": "/estaticos",
          "titulo": "Estaticos"
        },
        {
          "id": 12,
          "id_padre": 9,
          "icono": "fa fa-file fa-fw",
          "link": "/parametrizados",
          "titulo": "Parametrizados"
        },
        {
          "id": 13,
          "id_padre": 0,
          "icono": "fa fa-wrench fa-fw",
          "link": "#",
          "titulo": "Opciones"
        },
        {
          "id": 22,
          "id_padre": 13,
          "icono": "fa fa-industry fa-fw",
          "link": "#",
          "titulo": "Marcas de<br/>Equipos"
        },
        {
          "id": 23,
          "id_padre": 22,
          "icono": "fa",
          "link": "/marcas",
          "titulo": "Marcas"
        },
        {
          "id": 24,
          "id_padre": 22,
          "icono": "fa",
          "link": "/modelos",
          "titulo": "Modelos"
        },
        {
          "id": 32,
          "id_padre": 13,
          "icono": "fa fa-clock-o fa-fw",
          "link": "/turnos",
          "titulo": "Turnos"
        },
        {
          "id": 14,
          "id_padre": 13,
          "icono": "fa fa-flask fa-fw",
          "link": "#",
          "titulo": "Productos<br/>de Elaboración"
        },
        {
          "id": 25,
          "id_padre": 14,
          "icono": "fa",
          "link": "/productos",
          "titulo": "Productos"
        },
        {
          "id": 26,
          "id_padre": 14,
          "icono": "fa",
          "link": "/unidadesdemedicion",
          "titulo": "Unidades de<br/>Medición"
        },
        {
          "id": 15,
          "id_padre": 13,
          "icono": "fa fa-arrows-alt fa-fw",
          "link": "#",
          "titulo": "Areas y Procesos<br/>de Producción"
        },
        {
          "id": 30,
          "id_padre": 15,
          "icono": "fa",
          "link": "/areas",
          "titulo": "Areas"
        },
        {
          "id": 31,
          "id_padre": 15,
          "icono": "fa",
          "link": "/procesos",
          "titulo": "Procesos "
        },
        {
          "id": 16,
          "id_padre": 13,
          "icono": "fa fa-steam fa-fw",
          "link": "/equipos",
          "titulo": "Equipos"
        },
        {
          "id": 17,
          "id_padre": 13,
          "icono": "fa fa-user fa-fw",
          "link": "/personas",
          "titulo": "Personas"
        },
        {
          "id": 18,
          "id_padre": 0,
          "icono": "fa fa-gears fa-fw",
          "link": "#",
          "titulo": "Configuración"
        },
        {
          "id": 19,
          "id_padre": 18,
          "icono": "fa fa-users fa-fw",
          "link": "/usuarios",
          "titulo": "Usuarios"
        },
        {
          "id": 20,
          "id_padre": 18,
          "icono": "fa fa-suitcase fa-fw",
          "link": "/perfiles",
          "titulo": "Perfiles"
        },
        {
          "id": 21,
          "id_padre": 18,
          "icono": "fa fa-database fa-fw",
          "link": "/respaldo",
          "titulo": "Respaldo"
        },
        {
          "id": 33,
          "id_padre": 13,
          "icono": "fa",
          "link": "/tiposmtto",
          "titulo": "Tipos de Mantenimiento"
        },
        {
          "id": 34,
          "id_padre": 5,
          "icono": "fa",
          "link": "#",
          "titulo": "De Mantenimiento"
        },
        {
          "id": 36,
          "id_padre": 34,
          "icono": "fa",
          "link": "/paradas_mtto_graphic",
          "titulo": "Estadísticas"
        },
        {
          "id": 35,
          "id_padre": 34,
          "icono": "fa",
          "link": "/paradas_mtto",
          "titulo": "Listado"
        }
      ]
    };
    
    let menu_generado = GenerarTodo();
    $("#main-nav").append(menu_generado);
    
    function GenerarTodo(){
        var result = "";
        let menujson = { "menu": todoMenus.menu };
        function ordenar_menu(j) {
            menu = { menu: [] };
            for (n in j.menu) {
                insertar_menu(j.menu[n], 0, menu.menu);
            }
            return menu;
        }
        function insertar_menu(j, l, menu) {
            for(n in menu){
                if(menu[n].id == j.id_padre){
                    if (menu[n].menu == undefined)
                        menu[n].menu = [];
                    return menu[n].menu.push(j);
                }else{
                    if (menu[n].menu){
                        if (insertar_menu(j, l+1, menu[n].menu)){
                            return true;
                        }
                    }
                }
            }
            if(l){
                return false;
            }
            menu.push(j);
        }
        menu = ordenar_menu(menujson);
    
        result=menuList(menu.menu);
    
        function menuList(menu, l) {
            if ( l == undefined){
                l=0;
            }
            result = '<ul class="sidebar-menu tree" data-widget="tree">\n'
            for (n in menu) {
                result += '<li '+ ( (!menu[n].menu) ? '' : 'class="treeview"') +'><a href="' + menu[n].link + '"><i class="' + menu[n].icono + '"></i> <span>' + menu[n].titulo + '</span></a>';
                if (menu[n].menu) {
                    result += '\n'+menuList(menu[n].menu, l+1, result)+' ';
                };
                result += '</li>\n';
            }
            result += '</ul>\n'
            return result;
        }
        return result;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
    <nav id='main-nav'></nav>