I'm starting to experiment with Bootstrap, but I'm not able to get the js dropdown function working the way it does in their doc.
The code I'm using is source from one of the example dropdown nodes on their own site.
data-toggle="dropdown" is used on the links, and everything is as they say it should be. Anyone with a fresh set of eyes and more experience know whats going on? http://cssdeck.com/labs/pipw6ahd
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown open">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>
I think that you have a typo in the way you are including the bootstrap JS. Have a look at <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> and notice that you have .jss for the extension and also... the reason the link starts with // (double slash) is because it's missing the http: or https: protocol and they leave it off so you can add it.
You also forgot to include jQuery (it's a must for bootstrap's JS to work) and make sure you include it above the bootstrap JS or it won't work.
Here's a fiddle of the bare bone dropdown working with everything included.
The Fiddle
HTML
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
I just had the same issue in Bootstrap 3.3.2, that dropdowns weren't working.
I had included an older version of jquery (1.3) which doesn't work with bootstrap, I got this hint while looking at Firefox Webdeveloper Tools (F12) in Console and JS option enabled.
"Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
Removing this jquery include resolved my issue.
here is working demo
html
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
include css bootstrap.css
include js:: Jquery Library and bootstrap-dropdown.js
Related
In the Gmail have select option
when we will click the arrow it will show a pop up message like all,none,read.
how to create the pop up message like this using qtip in jquery.
Here how it's done using bootstrap
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a>
</li>
</ul>
</div>
I have the following HTML code:
<div style="text-align: center;">
<h2 class="bpcenter" style="color: white;">ONE</h2>
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Settings
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
which right now, is giving me this output:
I'm using the standard bootstrap 3.3.2 css/js files, and I haven't modified anything in the css code for .dropdown or .dropdown>menu.
The button is centered, but the <ul> and its subsequent <li>s are justified left. I'm not sure why.
The problem is that dropdown div expands to 100% width, and inner menu is positioned absolutely relatively to it and has left: 0.
You need to set your button as inline-block in this case menu will position properly:
<div class="dropdown drop-button">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Settings
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Another action</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
CSS:
.drop-button {
display: inline-block;
}
Demo: http://plnkr.co/edit/07w4pjNVnjd7p71fGOCT?p=preview
With Boostrap 3.2: when using navbar-right on a two different dropdown menus, they overlap slightly. The code below is directly from the Dropdown examples on the Bootstrap site, modified so there are two dropdowns on the right instead of one.
Note the JSFiddle snippet below. Make sure the Result window is wide enough to see the navbar, and then mouse over Dropdown 3 and 4. You'll see their borders overlap.
Any suggestions on how to work around this?
http://jsfiddle.net/codespelunker/ysqjt7fv/2
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
Ha so the issue was a small one. But the problem is when you are declaring your 2nd navbar-right div.
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
// This one was for dropdown 4
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
.
</ul> <-------------------------------------- here
<ul class="nav navbar-nav navbar-right"> <--- is the problem
//This one was for dropdown 3
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
</ul>
</li>
</ul>
Take out those two lines and you should have them not over lap AND in the right order
Check out the fiddle
The issue was that you were having them both being pushed to the right as separate divs. Instead of having one div push them to the right.
You can add this style
#navbar-example .navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
http://jsfiddle.net/ysqjt7fv/5/
I am designing a custom bootstrap wordpress theme. I have used wp-bootstrap-navwalker for nav menu and did exactly how it has been mentioned. but still, "Engineering Services" and "Products" dropdown is not working at all! Please save me!
the site is http://mywp.net84.net/
<ul class="nav" role="navigation">
<li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul
class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">Action</a>
</li>
<li><a tabindex="-1" href="#anotherAction">Another action</a>
</li>
<li><a tabindex="-1" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a>
</li>
</ul>
check in jsfiddle
make sure include appropriate id in the list.
I am manually including the bootstrap 3.1.1 files in my meteor project and styling is fine. When I put the code below in bootply it works but when using in my meteor app, I see the 'dropdown trigger' link but but clicking it does nothing?
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Action</a></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Separated link</a></li>
</ul>
</div>
argh!! I see now that I had both bootstrap.js and bootstrap.min.js files, removing bootstrap.js solved my problem. Sorry I missed that.
If you are using Iron Router try to delete href attribute from dropdown trigger:
<a data-toggle="dropdown">Dropdown trigger</a>
And add cursor pointer to a tag in your CSS:
a { cursor: pointer; }