<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");
}
);
});
