6

Por ejemplo: si despliegan Opciones pueden observar que el texto de la opción Áreas y Procesos de Producción pasa encima de la flecha, eso quiere decir que el width del menú no se adapta a los textos internos. Pero no se como solucionarlo, intente con width: auto y no sirvió, se muy poco de css.

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 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 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 Medición"
    },
    {
      "id": 15,
      "id_padre": 13,
      "icono": "fa fa-arrows-alt fa-fw",
      "link": "#",
      "titulo": "Areas y Procesos 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 ' + (l?'class="treeview-menu"':'class="sidebar-menu" 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>'+ ( (menu[n].menu) ? '<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></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://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/js/app.min.js"></script>

<aside class="main-sidebar" style="height: auto;">
    <section class="sidebar" id='main-nav'></section>
</aside>

OJO: deben abrirlo en pantalla completa para que vean el menú

1
  • Los problemas están en tu CSS, sería conveniente que puedas emular tu menu con las herramientas de stack o sino por jsbin
    – Raul
    el 25 ago. 2017 a las 22:03

2 respuestas 2

7
+100

Una manera para solucionarlo es usar en la clase .treeview la propiedad white-space:normal;. Esto hará que el texto haga salto de linea cuando sobrepase el tamaño del elemento.

Ejemplo:

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 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 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 Medición"
    },
    {
      "id": 15,
      "id_padre": 13,
      "icono": "fa fa-arrows-alt fa-fw",
      "link": "#",
      "titulo": "Areas y Procesos 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 ' + (l ? 'class="treeview-menu"' : 'class="sidebar-menu" 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>' + ((menu[n].menu) ? '<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></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;
}
.treeview a {
  white-space: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/js/app.min.js"></script>

<aside class="main-sidebar" style="height: auto;">
  <section class="sidebar" id='main-nav'></section>
</aside>

1
  • Genial, no sabia que existía eso en css. Mil gracias hermano.
    – bypabloc_
    el 29 ago. 2017 a las 19:27
5

Recorriendo el objeto json puedes sacar la longitud de los títulos, almacenar la mayor longitud y multiplicarlos por un tamaño de píxeles dados y ese tamaño en pixeles ponérselo a un objeto html, por ejemplo el de tu menú. Un saludo ;-)

$(document).ready(function(){

	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 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 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 Medición"
	    },
	    {
	      "id": 15,
	      "id_padre": 13,
	      "icono": "fa fa-arrows-alt fa-fw",
	      "link": "#",
	      "titulo": "Areas y Procesos 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"
	    }
	  ]
	};

	var caracter = 8;

	var longitudMayor = 0;

	var margenTextoMenu = 30;

	$.each(todoMenus.menu, function(i, item) {

		if(item.titulo.length > longitudMayor){

			longitudMayor = item.titulo.length;

		}
	    
	});

	pixelesNecesarios = parseInt(caracter * longitudMayor);
	pixelesNecesarios = pixelesNecesarios + margenTextoMenu;
	pixelesFinales = pixelesNecesarios+'px';

	var div =$('<div></div>');
	$("body").append(div);
	div.css('background-color','green');
	div.css('width',pixelesFinales);
	div.css('color','white');
	div.css('text-align','center');
	div.append('Tengo: '+pixelesFinales+' de ancho he añadido 30 mas de margen');



	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 ' + (l?'class="treeview-menu"':'class="sidebar-menu" 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>'+ ( (menu[n].menu) ? '<span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></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;
}


$('.main-sidebar').css('width',pixelesFinales);


});
.treeview a {
  white-space: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/AdminLTE.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/css/skins/_all-skins.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.3.11/js/app.min.js"></script>


<aside class="main-sidebar" style="height: auto;">
    <section class="sidebar" id='main-nav'></section>
</aside>

0

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.