CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Blaszard
Blaszard

Reputation: 31965

Hover over dropdown menu in Twitter Bootstrap

How to write out the code that when you hover over a dropdown menu which is implemented using Twitter Bootstrap 3, the dropdown menu shows up and users can click on the link of the expanded dropdown menu?

I wrote the following HTML:

        <nav>
            <ul id="mainMenu">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown">Blog<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/1">1</a></li>
                        <li><a href="/2">2</a></li>
                    </ul>
                </div>
                </li>

            </ul>
        </nav>

And the following CSS:


ul#mainMenu li {
    display: inline-block;
    padding: 3px;
    background-color: orange;
    border-radius: 5px;
    -webkit-transform: skewX(-6deg);
}

ul#mainMenu li:hover {
    background-color: green;
}

However, when you hover over the Blog menu in dropdown menu, the dropdown menu doesn't expand, but if you click on it the menu expands.

And even if you expand the menu, the expanded menu is pathetically awful in layout, since there are redundant white spaces in the expanded menu, probably due to me making it skewed to some degree (-6deg).

Also, the expanded menu is located horizontally, not vertically. I don't know why it's located horizontally, but can I fix it?

Thanks.

[Update] For some reasons HTML code is not displayed correctly. Now I have to check out how to resolve it, and if I get to know how to fix it, I'll do. I wrote those in <pre><code> tags for your information.

Upvotes: 1

Views: 8303

Answers (4)

Arun_SE
Arun_SE

Reputation: 230

Use the below CSS to have both toggling and hovering for menus.

.dropdown:hover .dropdown-menu {
    display: block;
 }

Its simple

Upvotes: 1

Florian Mertens
Florian Mertens

Reputation: 2448

Took me a while to find it. It's amazing howmany people post endlessly complicated stuff that doesn't work, if you google around! This simple CSS worked for me, although I can't vouch how it behaves on small devices.

.navbar-nav > li:hover > .dropdown-menu {
  display: block;
}

Upvotes: 6

thdoan
thdoan

Reputation: 19097

If you want something super lightweight without requiring any plugins or having to add more attributes to your code, then drop this JS code into your page and all your dropdowns should now open on hover:

<script>
var bMobile;  // true if in mobile mode

// Initiate event handlers
function init() {
  // .navbar-toggle is only visible in mobile mode
  bMobile = $('.navbar-toggle').is(':visible');
  var oMenus = $('.navbar-nav .dropdown'),
    nTimer;
  if (bMobile) {
    // Disable hover events for mobile
    oMenus.off();
  } else {
    // Set up menu hover for desktop mode
    oMenus.on({
      'mouseenter touchstart': function() {
        event.preventDefault();
        clearTimeout(nTimer);
        oMenus.removeClass('open');
        $(this).addClass('open');
      },
      'mouseleave': function() {
        nTimer = setTimeout(function() {
          oMenus.removeClass('open');
        }, 500);
      }
    });
  }
}
$(document).ready(function() {
  // Your other code to run on DOM ready...
  init();
});

$(window).resize(init);
</script>

Upvotes: 0

ravb79
ravb79

Reputation: 752

You could try one of the abundantly available bootstrap related plugins, like https://github.com/CWSpear/twitter-bootstrap-hover-dropdown ?

Or isn't that what you're looking for?

Upvotes: 2

Related Questions