<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<nav class="findNav" role="navigation">
<button class="findNavToggle">
toggle
</button>
<div class="findNavContainer">
<ul class="nav-menu menu">
<li class="findMenuItem findMenuHasDropdown">
<a href="#!" class="menu-link">Root</a>
<ul class="findNavDropdown menu">
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a> </li>
<li class="findMenuItem findMenuHasDropdown staticPosition">
<a href="#!" class="menu-link">Level 1</a>
<ul class="findNavDropdown menu">
<li class="findMenuItem staticPosition">
<a href="#!" class="menu-link">AIPMT</a>
</li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
<li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
</ul>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
<li class="findMenuItem">
<a href="#!" class="menu-link">Level 1</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
.findNavContainer {
position: fixed;
top: 60px;
left: 0;
z-index: 9999;
overflow-y: auto;
visibility: hidden;
width: 100%;
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-overflow-scrolling: touch;
}
.findNavContainer.is-visible {
visibility: visible;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.findIsActive .icon-menu .line-3 {
-webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
-ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
transform: translateY(-8px) translateX(0) rotate(-45deg);
}
.menu {
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu .findMenuItem {
border-top: 1px solid #dadee0;
}
.nav-menu > .findMenuItem:last-child {
border-bottom: 1px solid #dadee0;
}
.nav-menu .menu-link {
display: block;
text-decoration: none;
color: #444;
padding: 0.50rem 1rem;
}
.findMenuHasDropdown {
position: relative;
cursor: pointer;
}
.findMenuHasDropdown > .menu-link { display: inline-block; }
.findMenuHasDropdown:after {
font-size: 22px;
position: absolute;
top: 4px;
right: 1rem;
bottom: 0;
content: "+";
color: #222;
}
.findMenuHasDropdown.findIsActive:after {
content: "\2013";
}
.findNavDropdown {
display: none;
background-color: #c0c0c0;
}
.findMenuHasDropdown.findIsActive > .findNavDropdown {
display: block;
}
.findNavDropdown .findMenuItem {
border-color: #dadee0;
background: #fff
}
.findNavDropdown .findNavDropdown .findMenuItem {
background-color: #43a7db;
border-color: #419ccc;
}
.findNavDropdown .findNavDropdown .findMenuItem a{
color: #fff;
font-size: 14px;
}
@media (min-width: 960px) {
.staticPosition{
position: static;
}
.findNav,
.findNavContainer,
.findNavContainer.is-visible {
position: static;
top: auto;
left: auto;
z-index: auto;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.findNavContainer,
.findNavContainer.is-visible {
visibility: visible;
height: auto;
min-height: 0;
overflow-y: visible;
}
.findNavToggle { display: none; }
.nav-menu > .findMenuItem,
.nav-menu > .findMenuItem.findIsActive {
display: inline-block;
background-color: transparent;
border: 0;
}
.nav-menu > .findMenuItem:last-child {
border: 0;
}
.nav-menu .findMenuItem {
-webkit-transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.findMenuHasDropdown:after { content: "" !important; }
.findMenuHasDropdown > .menu-link {
padding-right: 2rem;
}
.findNavDropdown {
display: block;
opacity: 0;
position: absolute;
top: 100%;
width: 200px;
margin: 0;
padding: 0;
background-color: #fff;
border: 1px solid #dadee0;
visibility: hidden;
-webkit-transition: visibility 0s linear 0.25s, opacity 0.25s linear;
transition: visibility 0s linear 0.25s, opacity 0.25s linear;
}
.findMenuHasDropdown:hover > .findNavDropdown {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 0s;
transition-delay: 0s;
min-height: 374px;
}
.findNavDropdown .findMenuItem {
border: 0;
}
.findMenuItem a{
font-size: 14px;
}
.findNavDropdown .findMenuItem a:hover,
.findNavDropdown .findNavDropdown .findMenuItem a:hover {
color: #43a7db;
border-left: 3px solid #43a7db;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
font-size: 14px;
}
.findNavDropdown .findMenuItem ul li a{
color: #fff !important;
font-size: 14px;
border-left: none !important;
}
.findNavDropdown .findMenuItem ul li a:hover{
color: #fff !important;
font-weight: 14px;
border-left: none !important;
}
.findNavDropdown .findNavDropdown,
.findNavDropdown .findNavDropdown .findMenuItem {
background-color: #43a7db;
}
.findNavDropdown .findNavDropdown,
.findNavDropdown .findNavDropdown .findMenuItem:hover {
color: #fff;
}
.findNavDropdown .findNavDropdown {
z-index: 9998;
top: 0;
left: 100%;
}
@media (max-width: 768px){
.staticPosition{
position: relative;
}
}
$(function() {
var html = $('html, body'),
navContainer = $('.findNavContainer'),
navToggle = $('.findNavToggle'),
navDropdownToggle = $('.findMenuHasDropdown');
// Nav toggle
navToggle.on('click', function(e) {
var $this = $(this);
e.preventDefault();
$this.toggleClass('findIsActive');
navContainer.toggleClass('is-visible');
html.toggleClass('nav-open');
});
// Nav dropdown toggle
navDropdownToggle.on('click', function() {
var $this = $(this);
$this.toggleClass('findIsActive').children('ul').toggleClass('is-visible');
});
// Prevent click events from firing on children of navDropdownToggle
navDropdownToggle.on('click', '*', function(e) {
e.stopPropagation();
});
});
