Navigation Dropdown on Hover

Bootstrap Studio Help
1

I do wonder, is there an “easy” way to enable the dropdown menu of the navigation on hover? Or do I need to manually add some js to enable that?

2

You can do it with css

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

.dropdown > .dropdown-toggle:active {
  pointer-events: none;
}
2 Likes
3

That’s even better. Thanksies!

I also added some animation to it to make it look even better:

.dropdown-menu {
   opacity: 0;
   transform: translateY(2rem);
   transition: transform 0.5s;
}

.dropdown:hover > .dropdown-menu {
  opacity: 1;
  transform: translateY(-2px);
  transition: opacity 0.5s, transform 0.5s;
}

The -2px are needed because otherwise the dropdown menu would flicker (or even disappear when you move slowly) when moving the mouse down to the dropdown list.

1 Like
4
5

That’s a nice one too, personally I find it too much on the eyes with all the drop-downs on the page though.

6

I use a subtle animation effect on the nav dropdowns on this site…

7

Needed to inspect the code and the javascript to see how you did the hiding and revealing of the nav section. Is that your own script? I am a js noob and probably always will be, but at least I grasped basically how this one works. Well done.

8

I’m a JS noob as well, but I stumble my way through stuff when I need to. The JS that hides the navbar and other items was something I found on (I think) Stack Overflow. I might have modified it slightly. It also uses some CSS transitions to handle the fade and “easing” up and down.

The dropdown animation is just straight CSS (transform and transition) applied to the .dropdown-menu and dropdown-menu.show classes.

1 Like
9

This is the JS I usually use for a navbar

Make sure you set the navbar with an ID of mainnav

It then adds a class of scrolled when you have scrolled 140px and removes it when you scroll back to less than 80px (of course you can change these values)

(function () {
  "use strict"; // Start of use strict

  const content = document.querySelector("#mainnav");

  document.addEventListener("scroll", (e) => {
    var scrolled = document.scrollingElement.scrollTop;
    var position = content.offsetTop;

    if (scrolled > 140) {
      content.classList.add("scrolled");
    } else if (scrolled < 80) {
      content.classList.remove("scrolled");
    }
  });
})(); // End of use strict

The reason for the 80/140px being different, I found that on some browsers you would get a stutter if they where too close.

Some of the CSS to give you an idea

#mainnav {
  background: rgba(19, 26, 73, 0) !important;
  height: 9rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#mainnav.scrolled {
  height: 5rem;
  background: var(--bs-dark) !important;
}

#mainnav .navbar-brand img {
  height: 4.5rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#mainnav.scrolled .navbar-brand img {
  height: 3rem;
}

update:

you will need to add fixed-top class to the navbar

or add this to the #mainnav css:

position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
1 Like
10

Replying to my own thread. After discovering that the animation got triggered even when I hovered over the dropdown-menu, which was just set to zero opacity but still kinda visible below the trigger, I switched to keyframes. Now the dropdown menu only really animates and reveals itself when I hover over the trigger.

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

.dropdown-menu {
    animation: .5s slideup;
  }

@keyframes slideup {
  from {
    transform: translateY(25px);
  }
  to {
    transform: translateY(0);
  }
}
11

Got a link so we can see it in action?

12

discontinued (for now)

1 Like
13

Looks nice. I do notice a slight (2-3 pixel) y-position change when clicking the dropdown vs hovering over it.

14

Heh, haven’t noticed that before.Never tried that when something opens on hover though. On Mac OS with Safari I get a green border when I click it. Must be highlighting for accessibility reasons. That moves the dropdown menu down a pixel indeed.

Don’t think I’m bothering with that. I find accessibility features rather important.

15

I’m a little nuts when it comes to noticing small details :crazy_face:

Remember, hover is only for desktop. On mobile (phones) you use a traditional menu, so this is a non-issue, but a small number of visitors might use a tablet (or similarly sized touch-screen device,) and will be tapping the dropdown link (though on a smaller screen they probably won’t notice such a tiny shift in the menu :wink: )

1 Like