¿Como hago para redimensionar el ancho de un menú segun el texto mas ancho que contiene?

Question

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ú

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, Aug 25 '17 at 22:03

score 7 · Accepted Answer · answered Aug 29 '17 at 19:19

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>

Genial, no sabia que existía eso en `css`. Mil gracias hermano. — bypabloc_, Aug 29 '17 at 19:27

jruano · Answer 2 · 2017-08-29T20:31:45.927

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>

¿Como hago para redimensionar el ancho de un menú segun el texto mas ancho que contiene?

2 Answers2

Linked