Skip to content

Instantly share code, notes, and snippets.

@goldenboy

goldenboy/bootstrap-navbar-dropdown.html

Forked from tfausak/bootstrap-navbar-dropdown.html
Created May 5, 2012 20:27
Show Gist options
  • Save goldenboy/2605381 to your computer and use it in GitHub Desktop.
Save goldenboy/2605381 to your computer and use it in GitHub Desktop.
Download ZIP
Dropdown menu in Twitter Bootstrap's collapsed navbar
Raw
bootstrap-navbar-dropdown.html
<!doctype html>
<html>
<head>
<meta charset=utf-8">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>
.navbar .pull-right .dropdown-menu:before {
left: auto;
right: 12px;
}
.navbar .pull-right .dropdown-menu:after {
left: auto;
right: 13px;
}
@media (max-width: 979px) {
.navbar .dropdown-menu.no-collapse {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
display: none;
float: left;
margin: 0;
padding: 4px 0;
position: absolute;
top: 100%;
}
.navbar .dropdown-menu.no-collapse:before,
.navbar .dropdown-menu.no-collapse:after {
display: block;
}
.navbar .dropdown-menu.no-collapse li + li a {
margin-bottom: 0;
}
.navbar .dropdown-menu.no-collapse .divider {
display: list-item;
}
.navbar .dropdown-menu.no-collapse a {
border-radius: 0;
color: #333333;
font-weight: normal;
padding: 3px 15px;
}
.navbar .dropdown-menu.no-collapse a:hover,
.navbar .dropdown-menu.no-collapse .active a,
.navbar .dropdown-menu.no-collapse .active a:hover {
background-color: #0088cc;
color: #ffffff;
}
.btn-group.open .dropdown-menu.no-collapse {
display: block;
margin-top: 1px;
border-radius: 5px;
}
}
</style>
<title>Dropdown Menu in Twitter Bootstrap's Collapsed Navbar</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Dropdown Menu in Twitter Bootstrap's Collapsed Navbar</h1>
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</a>
<a class="brand" href="#">Brand</a>
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<i class="caret"></i>
</a>
<ul class="dropdown-menu no-collapse">
<li>
<a href="#">Link</a>
</li>
<li class="active">
<a href="#">Link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<i class="caret"></i>
</a>
<ul class="dropdown-menu no-collapse">
<li>
<a href="#">Link</a>
</li>
<li class="active">
<a href="#">Link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li>
<a href="#">Link</a>
</li>
<li class="active">
<a href="#">Link</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">Link</a>
</li>
<li class="active">
<a href="#">Link</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Link</a>
</li>
</ul>
</li>
<li class="divider-vertical"></li>
<li>
<a href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment