Cacher is the code snippet organizer for pro developers

<nav class="navbar navbar-default" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas">
				<span class="sr-only">Toggle navigation</span>
				<span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</span>
			</button>
		</div>
		<div class="navbar-offcanvas navbar-offcanvas-right navbar-offcanvas-touch" id="js-bootstrap-offcanvas">
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown">
					<a href="animals.php" class="dropdown-toggle">Animals</a>
					<ul class="dropdown-menu dropdown-menu-50" role="menu">
						<li><a href="cats.php">cats</a></li>
						<li><a href="dogs.php">dogs</a></li>
						<li><a href="birds.php">birds</a></li>
					</ul>
				</li>
				<li class="dropdown">
					<a href="vegetables.php" class="dropdown-toggle">Vegetables</a>
					<ul class="dropdown-menu dropdown-menu-50" role="menu">
						<li><a href="cauliflower.php">cauliflower</a></li>
						<li><a href="radish.php">radish</a></li>
						<li><a href="spinach.php">spinach</a></li>
					</ul>
				</li>
			</ul>
		</div><!-- nav-collapse -->
	</div><!-- container -->
</nav>

// use offcanvas nav plugin on mobile only
jQuery(document).ready(function(e) {
	fnToggleOffCanvasNav();
});
jQuery(window).resize(function(e) {
	fnToggleOffCanvasNav();
});
function fnToggleOffCanvasNav() {
	if ($(window).width() < 768) {
    $.getScript('js/bootstrap.offcanvas.min.js');
	}
}

// add "active-dropdown-parent" class to parent of dropdown nav for link formatting
$("#js-bootstrap-offcanvas ul li ul").hover(
  function(){ // Mouse Over
    $(this).parent().addClass("active-dropdown-parent");
  },
  function(){ // Mouse Out
    $(this).parent().removeClass("active-dropdown-parent");
  }
);