Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dropdown menu in Twitter Bootstrap's collapsed navbar
<!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>
@linglinggumi

This comment has been minimized.

Copy link

linglinggumi commented Jun 19, 2014

Copy/Paste doesn't work straight away.

  1. Download and allocate the jquery.js file in js directory .
  2. Remove all script tab with src="http://twitter.github.com/bootstrap/assets/js/*.js" and add two script tab for jquery.js and bootstrap.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.