Bootstrap fixed-top navbar with jquery hover menu tab drops

Question

I'm learning how to use bootstrap framework on building the website. And there is a navbar hover effect I'd like to replicate. Please see the example below that provided by bootstrap. https://www.aceandtate.com/ The effect is: The menu texts always show while the nav bar only drops when your mouse over the nav-bar container area. Navbar white unfold drops while mouse hover

Can anyone show me how to do that?

Thanks,

Possible duplicate of [How to make twitter bootstrap menu dropdown on hover rather than click](http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — Gvidas, Feb 08 '16 at 06:13

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

First, create your dropdown with bootstrap. (I assume you have index.html,css folder, and js folder in one folder). index.html where you use bootstrap to create dropdown menu.

in your js folder, edit (create if none) your script.js file. Add this script

$('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

After that, include that script (if not yet include in your html file)

<script src="js/scripts.js"></script>

I place it before

</body>

Now your dropdown menu will automatic show when you hover the mouse

Source : http://codepen.io/betdream/pen/frDqh

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 08 '16 at 06:03

AchmadJP

893
8
17

While this may answer the question. It's always recommended to provide answers which are not link only answers. You should consider posting some relevant codes/data in your answer. – Aditya Feb 08 '16 at 06:18
Hi thanks for replying. But the effect from the website is not bootstrap hover dropdown. I added a screen shot in my original posts for further elaboration. Thanks! – avril.h Feb 08 '16 at 06:26
1

@Aditya Thanks (y) Here how you do it. Hope it help. – AchmadJP Feb 08 '16 at 08:08

score 0 · Answer 2 · answered Feb 08 '16 at 07:01

Try this for on menu dropdown hover:

Add this JS:

$('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

If you want to show menu always open in mobile device then add media query in your CSS file and set property display:block

For media query check this for your reference MEDIA QUERIES FOR COMMON DEVICE

Bootstrap fixed-top navbar with jquery hover menu tab drops

2 Answers2