"Menu Acordeon vertical"
Bootstrap 3.0.0 Snippet by christiantigre

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row"> <div class="col-md-2"> <div class="support-menu"> <nav class="vertical"> <ul class="menu"> <li> <a href="#"> Categorias </a> <ul> <li> <a href="#"> General </a> </li> <li> <a href="#"> My Account </a> </li> <li> <a href="#"> Watching </a> </li> <li> <a href="#"> How To's </a> </li> <li> <a href="#"> Site Features </a> </li> <li> <a href="#"> Submissions </a> </li> </ul> </li> <li> <a href="#"> Marcas </a> <ul> <li> <a href="#"> iOS </a> </li> <li> <a href="#"> Android </a> </li> <li> <a href="#"> Amazon </a> </li> <li> <a href="#"> Windows </a> </li> <li> <a href="#"> Chrome OS </a> </li> </ul> </li> <li> <a href="#"> Noticias </a> <ul> <li> <a href="#"> Roku </a> </li> <li> <a href="#"> Amazon Fire TV </a> </li> </ul> </li> <li> <a href="#"> Eventos </a> </li> <li> <a href="#"> Tienes dudas? </a> </li> </ul> </nav> </div> </div> </div> </div>
.support-menu * { margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } div.support-menu { margin: 20px auto; width: 100%; } .support-menu nav.vertical { border-radius: 4px;box-shadow: 0 0 10px rgba(0,0,0,.15);overflow: hidden;text-align: center;width: 100%; } .support-menu nav.vertical > ul {list-style-type: none;} .support-menu nav.vertical > ul > li {display: block;} .support-menu nav.vertical > ul > li ul{ display: none; } .support-menu nav.vertical > ul > li > a {background-color: rgb(157, 34, 60);background-image: -webkit-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: -moz-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: -o-linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));background-image: linear-gradient(135deg, rgb(114, 51, 98), rgb(157, 34, 60));border-bottom: 1px solid rgba(255,255,255,.1);box-shadow: inset 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1);color: rgb(255,255,255);display: block;font-size: .85rem;font-weight: 500;height: 50px;letter-spacing: .5rem;line-height: 50px;text-shadow: 0 1px 1px rgba(0,0,0,.1);text-transform: uppercase;transition: all .1s ease;text-decoration: none;} .support-menu nav.vertical > ul > li > a:hover { background-color: rgb(114, 51, 98); background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98)); cursor: pointer; } .support-menu nav.vertical > ul > li > ul {background-color: rgb(255,255,255);} .support-menu nav.vertical > ul > li > ul {list-style-type: none;} .support-menu nav.vertical > ul > li > ul > li > a {background-color: rgb(255,255,255);border-bottom: 1px solid rgba(0,0,0,.05);color: #333331;display: block;font-size: 1.1rem;padding: 10px 0;text-decoration: none;transition: all 0.15s linear;} .support-menu nav.vertical > ul > li > ul > li:hover > a {background-color: lightBlue;color: rgb(255,255,255);padding: 10px 0 10px 50px;}
$(document).ready(function(){ $('.menu li:has(ul)').hover(function(e){ e.preventDefault(); if ($(this).hasClass('activado')) { $(this).removeClass('activado'); $(this).children('ul').slideUp(); }else{ $('.menu li ul').slideUp(); $('.menu li').removeClass('activado'); $(this).addClass('activado'); $(this).children('ul').slideDown(); } }); });

Related: See More


Questions / Comments: