Geek asks and answers

How can I make the "Split Twitter Button" dropdown menu a "Dropdown Menu", and not with a click?

I am using Twitter Bootstrap dropdown . How can I get it in the dropdown when it freezes, and not when I click the arrow?

This is similar to this previous question , but for another Twitter Bootstrap item.

+3
source share
2 answers

The solution to this question is almost the same as the question in your link. You need to add CSS for the pseudo-selector: hover, which will display a dropdown. A hovering element should include both a button and a drop-down list. In the example below, I added a class btn-hoverto the button group to act as my hover selector.

        <div class="btn-group btn-hover">
          <button class="btn dropdown-toggle" data-toggle="dropdown" href="#">
            Action
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">Test</a></li><!-- dropdown menu links -->
            <li><a href="#">Test 2</a></li><!-- dropdown menu links -->
          </ul>
        </div>

CSS

div.btn-group:hover ul.dropdown-menu{
    display: block;    
}

div.btn-group ul.dropdown-menu{
    margin-top: 0px;    
}
+4
source

Use this code for a larger device hover effect and a smaller device click effect:

$(document).ready(function(){

  $('.dropdown').append("<style type='text/css'>@media screen and (min-width: 768px) { .dropdown:hover .dropdown-menu {display: block;} }</style>"); 

});
0
source

More articles:


All Articles