<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <script> MenuLateraLUser(); </script> </ul> </div> </nav>

function setCss(){ document.write("<style>@media (min-width: 768px) {</style>"); document.write("<style>nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{padding: 0 0px 0 0px;}</style>"); document.write("<style>nav.sidebar{width: 200px;height: 100%;margin-left: -160px;float: left;z-index: 8000;margin-bottom: 0px;}</style>"); document.write("<style>nav.sidebar li {width: 100%;}}</style>"); document.write("<style>@media (min-width: 1330px) {</style>"); document.write("<style>.main{width: calc(100% - 200px);margin-left: 200px;}</style>"); document.write("<style>nav.sidebar{margin-left: 0px;float: left;}</style>"); document.write("<style>nav.sidebar .forAnimate{opacity: 1;}}</style>"); document.write("<style>nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar</style>"); document.write("<style>.navbar-nav .open .dropdown-menu>li>a:focus {color: #CCC;background-color: transparent;}</style>"); document.write("<style>nav:hover .forAnimate{opacity: 1;}</style>"); document.write("<style>section{padding-left: 15px;</style>"); document.write("<style>}</style>"); } function MenuLateraLUser(){ setCss(); for(let i=0;i<IconMenuLateralUser.length;i++) for(let j=0;j<IconMenuLateralUser[i].length;j++) document.write("<li><a href='#'><span style='font-size:16px;' class='fa "+IconMenuLateralUser[i][j]+"'> "+IconMenuLateralUser[i][++j]+"</span></a></li>"); }