Navbar dropdown hover

[beng2000]

Hello.  Is it advisable to make a bootstrap 4 dropdown on the navbar hover?  I have read that it should only be used for the largest screen size.  Any thoughts?

Does anyone know of an active forum to ask questions about Bootstrap 4 on the web?

Thanks.

[osgood_]

No reason why you cant have a 'hover' effect for desktop devices. Hover wont work on mobile devices though so you need to keep the default onclick event.

If you want to implement the drop down on hover and you are using Bootstrap 4 then you need to write a bit of extra javascript. Below is just something I put together which will do the job (assuming youre using the default Bootstrap 4 html structure). Someone who actually uses Bootstrap (I personally don't) may have a better more streamlined solution. I have no doubt there are few ways you can do this.

The below script needs to be located at the bottom of your page just before the closing </body> tag.

 <script>
// get all the dropdown-toggle anchor links and assign them to a variable - dropdownToggle
const dropdownToggle = document.querySelectorAll('.dropdown-toggle');
// get all the dropdown-menu divs and assign them to a variable - dropdownMenu
const dropdownMenu = document.querySelectorAll('.dropdown-menu');
// loop through each dropdown-toggle anchor and display the next dropdown-menu div whilst adding display none to the others
dropdownToggle.forEach(function(dropdown) {
dropdown.onmouseover = function() {
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.style.display = "none";	
})
this.nextElementSibling.style.display = "block";
}
});
// loop though all the dropdown-menu divs and apply an onmouseleave event to hide the current active div
dropdownMenu.forEach(function(dropdownMenu) {
dropdownMenu.onmouseleave = function() {
this.style.display = "none";
}
})
</script>

[Nancy OShea · Accepted solution]

Bootstrap is a mobile-first framework. 

My analytics tell me the majority of site traffic is coming from touch screens  -- mobile, tablets, laptop/tablet hybrids, surface pros, etc... so that's who I cater to.  Hover menus of the past don't add anything and are for the most part  obsolete now.  I rarely if ever see them anymore.

[osgood_]

Hover menus of the past don't add anything and are for the most part obsolete now. I rarely if ever see them anymore.

I would agree with that statement, however it won't do any harm to throw in a hover effect for desktop device if one can be bothered just as long as you don't rely on it for mobile devices. Can I personally be bothered, no. Is it really needed, no - unless you're paranoid about the end user having to do that extra click.

[beng2000]

This is what I was thinking because it will only work on a desktop.  

Thanks to all of you!

[BenPleysier]

If this is what the dropdown looks like

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown01">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</li>

  Then add the following to the style rules

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

PS: Have I ever told you that I have an adversity to hover events?

[osgood_]

Have I ever told you that I have an adversity to hover events?

Why is that Ben? We always used to deploy hover events back in the day. Nothing much has changed for desktop, they can still bring some subtle eye-candy on those devices, no?

[BenPleysier]

Sorry for the late reply, had a busy day.

I have come across websites that, no matter where the curser is, something pops up or changes colour. I want to be in command when I visit a website. Clicking or tapping is a conscious action.

[osgood_]

I have come across websites that, no matter where the curser is, something pops up or changes colour.

Well I agree, that is just irritating and I have said that in the past where 'developers' over deploy events, whether that be hover/animation on scroll, etc. That is just bad practice but some subtle hover/scroll event usages I think is acceptable.  It's just about knowing when to use them and when not to and certainly not using them just because they are available.