Simple Menu Toggle

JavaScript
1

Hi there,

I’m attempting to make a menu toggle for the Features and Company sections of my menu. It should:

  1. Toggle any active menus to hide them
  2. On a second click of the header link or clicking away from the menu, it should hide the active menu again

What I’m finding at the moment is I’ve covered the first point but cannot find a way of implementing the second without affecting what I’ve applied already.

Demo link below - note that the mobile navigation won’t appear in this version (I’m still working on that part).
https://codepen.io/Shoxt3r/pen/xbxJOPb

Any thoughts please?

2

Bind a click to the document that hides all menus;
Bind a click to the header that:

  • checks to see if it’s associated menu is currently shown.
  • Hide all menus (hey look, i’ve typed that twice. Smells like a function.)
  • If the check from bullet 1 was negative, show the associated menu and stop propagation.

(There may be additionals needed depending on the complexity or desired actions of your menu items. So far i just see a single layer of menu with clickable links that presumably send the user to a new page.)

3

Thank you for the tips!
I’ve now applied some checks that only show the associated menu and close all other menus via a function.

I now have a couple of minor issues I would like some advice on please:

  • When opening/closing the “Features” and “Company” menus, there is sometimes a slight pause when the show or hide occurs, particularly if you open/close quite quickly
  • Within the mobile view, if you open the navigation and then change to desktop or tablet view, the “show” class remains in the “nav” element, but also when changing back to the mobile view, the menu is already open in this scenario.

I’ve updated the Codepen below - do you have any ideas why the above issues may be happening please?
https://codepen.io/Shoxt3r/pen/emYLWgW

Thank you in advance.

4

This is probably (the non-CSS guru says) because you’re animating when you do a click:

siteOverlay.classList.toggle('fade');

...
.fade {
    animation: fade 0.3s forwards;
}

So if you click twice in less than 0.3s, you’re tripping into the animation sequence.

Well nothing is bound to a resizing of the window to cause it to remove a class from an element. Is that something you’re trying to do? (I wouldnt… the user opened the menu, why would you want to close it just because they turned their device sideways to see it better?)

5

You could use match media to remove the class at the breakpoint that the full menu is in view rather than using window resize etc.

Here’s an old basic example.

https://codepen.io/paulobrien/pen/gvpXJo

6

I wrote a css only drop down menu using grid transitions a couple of years ago. Less moving parts.

I don’t know if this is of interest.

https://codepen.io/rpg2019/pen/yLQXyMQ

1 Like