具有jQuery悬停菜单选项卡放置的Bootstrap固定顶部导航栏

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,

Answer 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

Answer 2

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