Parent/Sibling Navigation Structure

[steynv (Steyn)]

I have a navigational structure like in the images below.

What I want is to display a list of all the patterns when clicking through the All UI Patterns menu item. It also needs to be the active menu item (that’s the easy part though). But then, because the Product Slider is conceptually a sibling of All UI Patterns, the parent (All UI Patterns) need to remain active.

Currently I’ve put the patterns in a folder but that doesnt help because I cant use the folder as a destination link.

How would I achieve this?

Thanks
Steyn

[samliew (samliew.com)]

You can do this with custom code.

[steynv (Steyn)]

Ok, cool! How would I do that?

[samliew (samliew.com)]

Write JavaScript code that selects the first menu item and gives it the class of w--current. Place it in every child page.

[steynv (Steyn)]

Sorry for my ignorance, but I don’t know JS. I’m not exactly sure what to Google for, but I found something that seem like a solution to me:

$(document).ready(function() { $("#menu").on("click", function() { $("#menu").removeClass("w--current"); $(this).addClass("w--current"); }); });

Or not?

[samliew (samliew.com)]

You just need something like this

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('#menu a').first().addClass("w--current");
});
</script>

[steynv (Steyn)]

Perfect! That seems to work. Thanks Sam.

Just to clarify for others in the future, here’s what I did:

I gave an ID to the parent of the menu item links. In Sam’s example above, it’s called #menu, but I called mine #all-ui-patterns. You can call it whatever you want to.

I then copied the script to the head tag of every page I wanted to have an active state.

And the result is this:

Hope that makes sense.

Steyn