Bootstrap Snippet Hover collapse vertical nav with flyout using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/********* 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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
// 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");
        }
    );
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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