<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Dropdown on Hover Test Suite</title>
<!-- Load local jQuery. -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- Load local Bootstrap. -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link href="../bower_components/bootstrap/dist/css/bootstrap.css" type="text/css" rel="stylesheet" />
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.css" type="text/css" rel="stylesheet" />
<!-- CSS Animations -->
<link href="../src/animations.css" type="text/css" rel="stylesheet" />
<!-- Load local lib and tests. -->
<script src="../src/bootstrap-dropdown-on-hover.js"></script>
<!-- Demo script -->
<script>
$(function() {
$("#demo-1").bootstrapDropdownOnHover();
$("#demo-2").bootstrapDropdownOnHover({
mouseOutDelay: 50
});
$(".hover-enabled").bootstrapDropdownOnHover({
responsiveThreshold: 768
});
});
</script>
</head>
<body>
<main>
<section class="container">
<h2>Drop-Down Navigation Menu</h2>
<ul id="demo-1" class="nav navbar-nav">
<li><a href="#">Navbar</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">flipInX <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="flipInX">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">fadeIn <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="fadeIn">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">fadeInUp <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="fadeInUp">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">fadeInDown <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="fadeInDown">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">slideDown <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="slideDown">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
<hr />
</section>
<section class="container">
<h2>Button Group</h2>
<p>With a 50ms Mouse-out Delay<br>
<code>
$("#demo-2").bootstrapDropdownOnHover({
mouseOutDelay: 50
});
</code>
</p>
<div id="demo-2" class="btn-group">
<div class="dropdown btn-group">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
<div class="dropdown btn-group">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
<div class="dropdown btn-group">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown trigger (Animated) <b class="caret"></b></a>
<ul class="dropdown-menu animated" data-animation="fadeInDown" role="menu" aria-labelledby="dLabel">
<li><a href="#">First</a></li>
<li><a href="#">Second</a></li>
<li><a href="#">Third</a></li>
</ul>
</div>
</div>
<hr />
</section>
<section class="container">
<h2>Split Button</h2>
<div id="demo-3" class="hover-enabled btn-group">
<button type="button" class="btn btn-default" onclick="alert('Action triggered!')">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<div id="demo-4" class="hover-enabled btn-group">
<button type="button" class="btn btn-default" onclick="alert('Action triggered!')">Action (Animated)</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu animated" data-animation="flipInX" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<hr />
<p>Try resizing the window to touch the responsive thresholds! The plugin will disable itself
if the window size is below the threshold (default: 992px), then re-enable itself when above the threshold
again.</p>
</section>
</main>
</body>
</html>