"Hover collapse vertical nav with flyout"
Bootstrap 3.2.0 Snippet by CreateSean

<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 ----------> <!-- Having trouble getting hover to work with collapse plugin because of the flyouts the 3rd level ul is not inside the li like it should be --> <div class="container" id="mainContent"> <div class="row"> <div class="col-sm-9 col-sm-push-3 content"> <h3>Not working 100%</h3> <p>Having trouble getting hover to work with collapse plugin because of the flyouts the 3rd level ul is not inside the li like it should be</p> <p>sometimes hover closes when it shouldn't and sometimes it stays open when it should close.'</p> </div><!--content--> <div class="col-sm-3 col-sm-pull-9" id="sidebar"> <ul class="nav nav-pills nav-stacked sideNav"> <li><a href="#">Botanical Explorer</a></li> <li><a href="#">Photo Galleries</a></li> <li class="subnav sub1" data-toggle="collapse" data-target=".sub1nav" data-parent=".sub1"><a href="/virtual-tours.html" >Virtual Tours</a></li> <ul class="list-unstyled subnavigation collapse sub1nav"> <li class="dropdown-submenu"> <a tabindex="-1" href="#">3rd level nav here</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li><a href="">Lorem ipsum dolor.</a></li> <li><a href="">Sint fuga, fugit!</a></li> <li><a href="">Maxime, incidunt, praesentium.</a></li> <li><a href="">Minima dolore, provident.</a></li> <li><a href="">Mollitia, voluptatem, eum.</a></li> <li><a href="">Tempora, qui officia.</a></li> </ul> <li class="subnav sub2" data-toggle="collapse" data-target=".sub2nav" data-parent=".sub2"><a href="#">Herbarium</a></li> <ul class="list-unstyled subnavigation collapse sub2nav"> <li><a href="">Lorem ipsum dolor.</a></li> <li><a href="">Sint fuga, fugit!</a></li> <li class="dropdown-submenu"> <a tabindex="-1" href="#">3rd level nav here</a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> </ul> </li> <li><a href="">Minima dolore, provident.</a></li> <li><a href="">Mollitia, voluptatem, eum.</a></li> <li><a href="">Tempora, qui officia.</a></li> </ul> <li class="active"><a href="gardens-collections.html">Gardens & Collections</a></li> </ul> </div><!--sidebar--> </div><!--row--> </div><!--container mainContent-->
/********* Sidebar *************/ /* line 3, SASS/_sidebar.scss */ #sidebar { /* background:$color-white; padding: 15px; margin-top: 25px; */ } /* line 10, SASS/_sidebar.scss */ #sidebar h1 { text-align: center; } /* line 14, SASS/_sidebar.scss */ #sidebar .btn-group, #sidebar .btn-group-vertical { width: 250px; max-width: 100%; margin: 10px 0; } /* line 19, SASS/_sidebar.scss */ #sidebar .btn-group .dropdown-menu, #sidebar .btn-group-vertical .dropdown-menu { top: 30px; } /* line 22, SASS/_sidebar.scss */ #sidebar .btn-group img, #sidebar .btn-group-vertical img { margin-top: 7px; } /* line 24, SASS/_sidebar.scss */ #sidebar .btn-default { width: 100%; background: #21474f; color: white; text-align: left; } @media only screen and (max-width: 479px) { /* line 3, SASS/_sidebar.scss */ #sidebar { display: none; } } /* line 36, SASS/_sidebar.scss */ #custom-search { margin-top: 10px; } /* line 39, SASS/_sidebar.scss */ .search-query { background: url(/images/mag-glass.png) no-repeat 97% center white; padding-right: 10px; } /* line 44, SASS/_sidebar.scss */ .signup { margin-top: 75px; } /* line 47, SASS/_sidebar.scss */ .signup form { background: #386138; padding: 5px; overflow: auto; border-right: 4px solid #9c3559; } /* line 53, SASS/_sidebar.scss */ .signup form > div { width: 80%; } /* line 55, SASS/_sidebar.scss */ .signup form input { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; height: 30px; } /* line 57, SASS/_sidebar.scss */ .signup form input:first-child { margin-bottom: 10px; } /* line 61, SASS/_sidebar.scss */ .signup form button { background: url(/images/signup-submit.png) no-repeat; border: none; text-indent: -9999px; width: 22px; margin-top: 5px; } /* line 70, SASS/_sidebar.scss */ .signup h3 { font-size: 16px; line-height: 16px; font-weight: bold; } /* line 75, SASS/_sidebar.scss */ .signup h3 img { margin-right: 10px; }
/* // sidebar show/hide 2nd level navigation */ $(document).ready(function() {   $('.sideNav .subnav').click(function() {     $(this).toggleClass('active');   }); // changes collapse plugin to work on hover $(".subnav").hover( function(){ var thisdiv = jQuery(this).attr("data-target") jQuery(thisdiv).collapse("show"); }, function(){ var thisdiv = jQuery(this).attr("data-target") jQuery(thisdiv).collapse("hide"); } ); });

Related: See More


Questions / Comments: