Menu item active on click with js script

I have the dropdown menu in place that works very-well. Now a client wants the active menu item getting a highlight. Something like this: https://codepen.io/sincilite/pen/pooWjde but also with a hover state effect.
I found some similar js which seems to do what I need(in a sample with only this js and some css). But unfortunately not in combination with the dropdown menu.
Might the problem be that the additional js and the foundation js are conflicting?

this is a https://codepen.io/mr_vespa/pen/zYryZQo I made up with the things I could find. It is partly working. The dropdown is not working dough! Also would be nice if the Home button is highlighted when first visiting the site. And after clicking it is also removed.

The site I am working on is still using version 6.4.2 what will happen if I include the latest version 6.6.* ? Will this grid

and the dropdown menu still work?

Any suggestions how to solve this?

I do not fully understand what you want to achieve. In general you can target opened menues with the right classes and preventing that other click events are fired by using event.stopPropagation() and event.stopImmediatePropagation().

Well the problem I have is, when I apply the js code that seems to work (at least in the codepen). But also when the code is applied, than the dropdowns are all visible (are open) and stay that way.

This is what I want to achieve. That a click on the parent menu item colors the menu item (parent) and stays colored also after the hover moves away. Preferably I want the “Home” button having the background color when first visiting the site (the black in my codepen). That has to be removed when first-time clicking one of the menu parents.

Wouldn’t CSS also work using the active classes and just adding and removing some additional class if needed? Same for the available events that you can listen for: https://get.foundation/sites/docs/dropdown-menu.html#js-events

Regarding the 6.4 => 6.6 question, we changed the default grid to the XY Grid. And there are many changes since 6.4. There are migrations needed for some parts and the explicit usage of the old float grid.

Regarding the open menues on the codepen, this is because you did not include jQuery, see the errors in the browser console:

image

See https://codepen.io/DanielRuf/pen/LYGqLgK which works. But you have to increase the specifity of the CSS rule to apply the color to active elements and so on.

Thanks I made some progress. Only thing that is strange is that when hovering over the menu the hover-state is only shown a split second and than the link is shown in blue?

My codepen which has on load only the first tab coloured.