I'm trying to make two bootstrap3 dropdown element working on the same line:
I've tried this:
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
Unfortunately it seems that the two dropdowns share the same ul list (only the second one). How can I bind the first dropdown to its ul list and the second one to its own ul list too?
You need to separate your dropdowns in two btn-group:
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
<div class="btn-group btn-group-inline">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div>
jsfiddle-link
You need them in 2 different divs like:
<ul class="list-inline">
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
<li>
<div class="btn-group btn-block">
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div>
</li>
</ul>
Added both buttons in <div class="dropdown pull-left">
<div class="btn-group btn-block">
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">first
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 1</li>
<li>Reason 2</li>
<li>Reason 3</li>
</ul>
</div> //added this
<div class="dropdown pull-left"> //added this
<button class="btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown">second
<span class="caret"></span>
</button>
<ul class="dropdown-menu btn-block">
<li>Reason 5</li>
<li>Reason 6</li>
<li>Reason 7</li>
</ul>
</div> //added this
</div>
Demo Link Here
Related
I'm building some website and I want to have menu like on http://www.strv.com (with transition effect on open and close).
I've already done code like:
<div class="menu">
<button id="hamburger" type="button" class="btn pull-left navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
JSFiddle: https://jsfiddle.net/eztuhvhL/
(not working there and don't know why), but there is no transition effect on close and I can't solve it.
And also I want to do add "Item1, Item2, Item3" to this menu on mobile screens and I don't know how to figure it out.
Thank you.
Your problem is that you have two buttons with the id hamburger so jquery doesn't know which one you want. If you look at the console for like chromes devtools, you will see that nothing happens when you click it. The solution is to get rid of the first instance of hamburger. Here is what I got:
http://codepen.io/Squeakasaur/pen/mWKzer
<div class="menu">
<button id="hamburger" class="btn pull-left">
<span class="fa fa-bars"></span>
</button>
<ul class="list-inline nav-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="pull-right"><i class="fa fa-shopping-bag" aria-hidden="true"></i></li>
</ul>
</div>
<div id="mainmenu">
<div class="container">
<button type="button" class="close btn btn-default navbar-toggle">Close</button>
<ul class="nav nav-pills nav-stacked">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</div>
</div>
That should fix your problem. You can also just change the id of the first instance to something else :P
When click on bootstrap button a list should be opened, but it doesn't respond on the click.
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
code:
http://jsfiddle.net/Fanadka/r0sfvrcz/
Any idea?
Firstly, you have to include jQuery in your fiddle.
Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this
<div class="btn-group dropdown">
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
FIDDLE
I was successfully using ui-bootstrap's dropdown menu with version 0.11.0 as follows:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
But, I needed to use datepicker's month mode which required me to upgrade to 0.13.3. Here's my other question explaining that.
Here's a common plunker.
But, now my dropdown menu has stopped working. On clicking it, no dropdown shows but also there is no error. Any idea how I should tackle this?
To fix this, you have to use the directive dropdown, not only the class.
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<i class="fa fa-cogs"></i> Hi !
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
Simply add dropdown and dropdown-toggle on your HTML tag will do the trick.
Working Plunker
As suggested by Pierre, I had to add attributes 'dropdown' and 'dropdown-toggle' rather than classes in version 0.13.3 as compared to 0.11.0. Changing the markup from:
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<i class="fa fa-cogs"></i> Hi !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
to
<ul class="nav navbar-nav navbar-right">
<li dropdown>
</i> Hi {{"{{user.fName}}"}} !<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>My Account</li>
<!-- <li class="divider"></li> -->
<li><button class="btn btn-danger btn-block" onclick="LogOut()">Log Out</button></li>
</ul>
</li>
</ul>
did the trick.
I'm trying to apply twitter bootstrap dropdown to table cell of my table:
http://jsfiddle.net/NzvKC/500/
So this doesn't work. I did it according to this.
However it works like this:
<li class="dropdown span2" id="chamber">
<a href="#" class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
Name
<b class="caret"></b>
<br><br>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li class="liInner" role="presentation"><a role="menuitem" tabindex="-1" href="#">Value</a></li>
</ul>
</li>
What am I doing wrong?
The problem is the hover script. Get the code from the cameronspear page and your example will work.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link
</li>
<li>Dropdown link
</li>
<li>Dropdown link
</li>
</ul>
</div>
<script src="http://cameronspear.com/downloads/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
so what im trying to do at the moment is add a few more things below the bs-docs-sidebar for twitter bootstrap. Im currently using this code
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<div class="row-fluid">
<ul class="nav nav-list bs-docs-sidenav affix">
<li><i class="icon-chevron-right"></i>item 1</li>
<li><i class="icon-chevron-right"></i> item 2</li>
<li><i class="icon-chevron-right disabled"></i> Item 3</li>
<li><a id="contribute" href="#forms"><i class="icon-chevron-right"></i> item 4</a>
<li><a id="contribute" href="#buttons"><i class="icon-chevron-right"></i> item </li> 5</a></li>
</ul>
<div class="well affix">
<h4>Big Heading</h4>
<div class="btn-group btn-block">
<button type="button" class="btn btn-warning">option 1</button>
<button type="button" class="btn btn-warning">option 2</button>
<button type="button" class="btn btn-warning">option 3</button>
</div>
<h4 class="pagination-centered">Or</h4>
<button class="btn btn-block btn-primary">Alternative</button>
</div>
</div>
but the position of the well, is not below the nav menu, it is stuck to the bottom of the page, and cut-off because the well contents seem to be pushing it out of range, is there a way to affix to the bottom of the nav menu instead?