<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper" class="active"> <!-- Sidebar --> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul id="sidebar_menu" class="sidebar-nav"> <li class="sidebar-brand"><a id="menu-toggle" href="#">Menu<span id="main_icon" class="glyphicon glyphicon-align-justify"></span></a></li> </ul> <div id="lateral"> <div id="menu"> <div class="row profile container-fluid"> <div class="col-sm-12"> <!-- SIDEBAR USERPIC --> <div class="profile-userpic"> <img src="https://yt3.ggpht.com/-Mkzp5zptlJU/AAAAAAAAAAI/AAAAAAAAAAA/blLjbZhAFoA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" class="img-responsive" alt=""> </div> <!-- END SIDEBAR USERPIC --> <!-- SIDEBAR USER TITLE --> <div class="profile-usertitle"> <div class="profile-usertitle-name"> Guilherme Cipriano </div> <div class="profile-usertitle-job"> 2info1 <br> <i class="glyphicon glyphicon-copyright-mark" ></i>50 Cipricoins </div> </div> <!-- END SIDEBAR USER TITLE --> <!-- SIDEBAR BUTTONS --> <!-- END SIDEBAR BUTTONS --> <!-- SIDEBAR MENU --> <div class="profile-usermenu accordion"> <ul class="nav"> <li> <a href="#"> <i class="glyphicon glyphicon-home"></i> Início </a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-user"></i> Perfil </a> </li> <li class= "accordion-item"> <a href="#"> <i class = "glyphicon glyphicon-list"></i> Ranking </a> <div class="accordion-item-content"> <ul> <li><a href="#">Turma</a></li> <li><a href="#">Insituição</a></li> <li><a href="#">Escolas</a></li> </ul> </div> </li> <li class= "accordion-item" id="materias"> <a href="#" target="_blank"> <i class="glyphicon glyphicon-fire"></i> Modo de Jogo </a> <div class="accordion-item-content"> <ul> <li><a href="#">Ranqueado</a></li> <li><a href="#">Treino</a></li> </ul> </div> </li> <li class= "accordion-item"> <a href="#"> <i class = "glyphicon glyphicon-list"></i> Disciplinas </a> <div class="accordion-item-content" id="ac2"> <ul> <li><a href="#">Português</a></li> <li><a href="#">Matemática</a></li> <li><a href="#">Ciências</a></li> <li><a href="#">História</a></li> <li><a href="#">Geografia</a></li> <li><a href="#">Inglês</a></li> <li><a href="#">Artes</a></li> </ul> </div> </li> <li> <a href="#" target="_blank"> <i class="glyphicon glyphicon-cog"></i> Configurações</a> </li> <li> <a href="#"> <i class="glyphicon glyphicon-question-sign"></i> Ajuda </a> </li> <li> <a href="#" target="_blank"> <i class="glyphicon glyphicon-share-alt"></i> Sair </a> </li> </ul> </div> </div> </div> </div> </div> </div>

.row{ margin-left:0px; margin-right:0px; } #wrapper { padding-left: 70px; transition: all .4s ease 0s; height: 100% } #sidebar-wrapper { margin-left: -150px; left: 70px; width: 150px; background: #222; position: fixed; height: 100%; z-index: 10000; transition: all .4s ease 0s; } .sidebar-nav { display: block; float: left; width: 150px; list-style: none; margin: 0; padding: 0; } #page-content-wrapper { padding-left: 0; margin-left: 0; width: 100%; height: auto; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; } #page-content-wrapper { width: 100%; } #sidebar_menu li a, .sidebar-nav li a { color: #999; display: block; float: left; text-decoration: none; width: 150px; background: #252525; border-top: 1px solid #373737; border-bottom: 1px solid #1A1A1A; -webkit-transition: background .5s; -moz-transition: background .5s; -o-transition: background .5s; -ms-transition: background .5s; transition: background .5s; } .sidebar_name { padding-top: 25px; color: #fff; opacity: .7; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; line-height: 60px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } #main_icon { float:right; padding-right: 65px; padding-top:20px; } .sub_icon { float:right; padding-right: 65px; padding-top:10px; } .content-header { height: 65px; line-height: 65px; } .content-header h1 { margin: 0; margin-left: 20px; line-height: 65px; display: inline-block; } @media (max-width:767px) { #wrapper { padding-left: 70px; transition: all .4s ease 0s; } #sidebar-wrapper { left: 70px; } #wrapper.active { padding-left: 150px; } #wrapper.active #sidebar-wrapper { left: 150px; width: 150px; transition: all .4s ease 0s; } } body { background: #F1F3FA; } /* Profile container */ .profile { margin: 20px 0; } /* Profile sidebar */ .profile-sidebar { padding: 20px 0 2px 0; background:; max-width: 300px; } .profile-userpic img { float: none; margin: 0 auto; width: 50%; height: 50%; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; } .profile-usertitle { text-align: center; margin-top: 20px; } .profile-usertitle-name { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 7px; } .profile-usertitle-job { text-transform: uppercase; color: #fff; font-size: 12px; font-weight: 600; margin-bottom: 15px; } .profile-userbuttons { text-align: center; margin-top: 10px; } .profile-userbuttons .btn { text-transform: uppercase; font-size: 11px; font-weight: 600; padding: 6px 15px; margin-right: 5px; } .profile-userbuttons .btn:last-child { margin-right: 0px; } .profile-usermenu { margin-top: 30px; } .profile-usermenu ul li { border-bottom: 1px solid #f0f4f7; } .profile-usermenu ul li:last-child { border-bottom: none; } .profile-usermenu ul li a { color: #fff; font-size: 14px; font-weight: 400; } .profile-usermenu ul li a i { margin-right: 8px; font-size: 14px; } .profile-usermenu ul li a:hover { background-color: #9BADC1; color: #5b9bd1; } .profile-usermenu ul li.active { border-bottom: none; } /* Profile Content */ .profile-content { padding: 20px; background: #fff; min-height: 460px; } .glyphicon{ color: #fff; } .accordion:hover .accordion-item:hover .accordion-item-content, .accordion .accordion-item--default .accordion-item-content { height: auto; line-height: 3em; background-color: } .accordion-item-content, .accordion:hover .accordion-item-content { height: 0; overflow: hidden; transition: height .25s; background-color:; color:; } .accordion-item-content ul{ list-style-type: none; } .accordion-item-content ul li a{ text-decoration: none; color: ##122F4F; border-left: 0px; }

$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("active"); });