Skip to content

Instantly share code, notes, and snippets.

@duncangh

duncangh/bootstrap-navbar-nested-hover.html

Last active October 10, 2018 17:12
Show Gist options
  • Save duncangh/e0fa8ba5c5ec9537964296cd2e1147ab to your computer and use it in GitHub Desktop.
Save duncangh/e0fa8ba5c5ec9537964296cd2e1147ab to your computer and use it in GitHub Desktop.
Download ZIP
HTML and CSS Snippets
Raw
bootstrap-navbar-nested-hover.html
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://codepen.io/jstneg/pen/vbfqy" rel="stylesheet" />
<style>
.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#555;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(onLoadNavbar);
function onLoadNavbar() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click mouseover', animateNavbar);
$('* > [data-toggle=dropdown]').on('click mouseover', animateNavbar);
$('ul.dropdown-menu [data-toggle=dropdown]').on('click mouseover', animateNavbar);
function animateNavbar(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
}
}
})(jQuery);
</script>
</head>
<body>
<div class="container pen">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">Huguenot Fuels Data</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Validation</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://resthf.herokuapp.com/admin/">Index</a></li>
<li><a href="http://resthf.herokuapp.com/admin/api/daydeal/">Day Deals</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Pricing</a>
<ul class="dropdown-menu">
<li><a href="#">Setups-customer: Customer Pricing Subscriptions</a></li>
<li class="divider"></li>
<li><a href="#">Setups-product: Finished Products</a></li>
<li><a href="#">Setups-product: Product Additives</a></li>
<li><a href="#">Setups-product: Finished Product w/ Additive</a></li>
<li class="divider"></li>
<li><a href="#">
Setups-quotes: Warehouse Quoted Products
</a></li>
<li class="divider"></li>
<li><a href="#">
Pricing-instructions: Pricing Strategy Instructions
</a></li>
<li><a href="#">
Pricing-review: Pricing Huguenot Price Review
</a></li>
<li><a href="#">
Pricing-review: Pricing Chart Review
</a></li>
<li class="divider"></li>
<li><a href="#">
OPIS Data: OPIS Pricing Cities
</a></li>
<li><a href="#">
OPIS Data: OPIS Pricing Markets
</a></li>
<li><a href="#">
OPIS Data: Opis Product Code Lookup
</a></li>
<li><a href="#">
OPIS Data: OPIS File Archive
</a></li>
<li><a href="#">
OPIS Data: OPIS Historical Price Data
</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.1</a></li>
<li><a href="#">Dropdown Submenu 5.2</a></li>
<li><a href="#">Dropdown Submenu 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
</body>
</html>
Raw
bootstrap-navbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navbar</title>
<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap-grid.css"/>
<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap-reboot.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="static/bootstrap/js/bootstrap.min.js"></script>
<script src="static/bootstrap/js/bootstrap.bundle.js"></script>
</body>
</html>
Raw
bootstrap-nested-navbar.html
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://codepen.io/jstneg/pen/vbfqy" rel="stylesheet" />
<style>
.dropdown-submenu{ position: relative; }
.dropdown-submenu>.dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;margin-right:-10px;
}
.dropdown-submenu:hover>a:after{
border-left-color:#555;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
</head>
<body>
<div class="container pen">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" target="_blank">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 4.1</a></li>
<li><a href="#">Dropdown Submenu 4.2</a></li>
<li><a href="#">Dropdown Submenu 4.3</a></li>
<li><a href="#">Dropdown Submenu 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.1</a></li>
<li><a href="#">Dropdown Submenu 5.2</a></li>
<li><a href="#">Dropdown Submenu 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Link 1</a></li>
<li><a href="#">Dropdown Link 2</a></li>
<li><a href="#">Dropdown Link 3</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 4.1</a></li>
<li><a href="#">Dropdown Submenu Link 4.2</a></li>
<li><a href="#">Dropdown Submenu Link 4.3</a></li>
<li><a href="#">Dropdown Submenu Link 4.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.3</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
<li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
</body>
</html>
Raw
bootstrap-slider.html
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" media="screen">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Range Slider</h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="/action_page_post.php">
<div data-role="rangeslider">
<label for="price-min">Price:</label>
<input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
<label for="price-max">Price:</label>
<input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>
<input type="submit" data-inline="true" value="Submit">
<p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
</form>
</div>
</div>
</body>
</html>
Raw
daterange_slider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Range Slider</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<p>
<label for="amount">Date range:</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100"/>
</p>
<div id="slider-range"></div>
<script>
$(function() {
$( "#slider-range" ).slider({
range: true,
min: new Date('2010.01.01').getTime() / 1000,
max: new Date('2014.01.01').getTime() / 1000,
step: 86400,
values: [ new Date('2013.01.01').getTime() / 1000, new Date('2013.02.01').getTime() / 1000 ],
slide: function( event, ui ) {
$( "#amount" ).val( (new Date(ui.values[ 0 ] *1000).toDateString() ) + " - " + (new Date(ui.values[ 1 ] *1000)).toDateString() );
}
});
$( "#amount" ).val( (new Date($( "#slider-range" ).slider( "values", 0 )*1000).toDateString()) +
" - " + (new Date($( "#slider-range" ).slider( "values", 1 )*1000)).toDateString());
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment