I'm trying to make my dropdown menu open by default when my collapsed navbar is opened. Here is a fiddle to show my code so far.
Currently, if you click on the navbar when it's in a collapsed state, two links and a dropdown menu are revealed. You have to click again to open the dropdown menu.
My aim is to make the dropdown menu open by default and hide the a.dropdown-toggle
element when the collapsed navbar is opened. A visual of how I'd like it to look when the collapsed navbar is opened:
My first thought was to use display: none
on a.dropdown-toggle
but that just hides the whole dropdown menu. Hoping someone can suggest something. I'm open to both jQuery and CSS solutions.
My markup:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute. The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
(item changes backgorund on hover and on click). Set toggle={false} property inside DropdownItem to prevent dropdown from closing.
You can add css style for responsive mobile display. paste it into your css file:
@media only screen and (max-width:480px){
.dropdown-menu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
position:static;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
}
you can see it in its entirety here : Demo jsfiddle
hope that helps.
According to the docs for Bootstrap v3, you can use Javascript to hook on the collapse events:
$(function () {
$('#bs-example-navbar-collapse-1').on('shown.bs.collapse', function(e) {
$('#my_dropdown').dropdown('toggle', 'open').hide();
console.log('shown:', e);
});
});
I'm not sure the result is what you want, because while the "toggle" button is hidden, the submenu is still indented. Instead of trying to bend Bootstrap that much, perhaps a better solution is having 2 menus with the desired structure for each screen size and show one or another based on media queries.
Fiddle: http://jsfiddle.net/scardine/tw82o88y/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With