Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar

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:

  • Link
  • Link
  • Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
  • One more separated link

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>
like image 338
henrywright Avatar asked Aug 12 '14 09:08

henrywright


People also ask

How do I open Bootstrap dropdown menu on click rather than hover?

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.

How do I keep a drop down menu open in HTML?

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.

How do I open a dropdown in Bootstrap?

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.

How do I keep a drop down menu from opening when I click it?

(item changes backgorund on hover and on click). Set toggle={false} property inside DropdownItem to prevent dropdown from closing.


2 Answers

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.

like image 59
Tarjo Avatar answered Oct 12 '22 02:10

Tarjo


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/

like image 44
Paulo Scardine Avatar answered Oct 12 '22 02:10

Paulo Scardine