highlight link-item an open parent level

[alpin3rocker]

Hi, how is it possible to open menu with highlighted link-item and open active level depend on depth? Thank you

[somewebmedia]

Check the data-nav-highlight and data-nav-active html data attributes. Let me know if that's what you are looking for.

[alpin3rocker]

Hi, i put the data attributes like your description in the list elements. Now the menu opens always with all levels. What else i can do? Thank you for sharing your super good work... Maybe you have a look to this Page link < 992px

[somewebmedia]

Then I'm not quite sure I understood your question. Can you be more precise explaining what you want to do? Thanks

[alpin3rocker]

Thank you for your quick answer and support! I hope i can explain more exactly. If a user stay in page cat2 (page with submenue) and open the menue it should open only the second panel but the menue opens all panels. If users stay in cat2-1 it should opens second and third panel. If a user stay in Home it should only open the first panel.

[somewebmedia]

As I can see in your code, you've put data-nav-active on all <ul> elements. Put it only on the level that you want to be open.

So for example on the cat2 page, place data-nav-active only on the:

<li class="cat-item catid-3 withchild catcode-cat2 has-dropdown" data-nav-active>

And then when you open the menu it will open on the second level (Cat2).

Try this code for WordPress integration, it should work out of the box.

[alpin3rocker]

yes because the navigation is generated with php from the shop system. I thought by myself that this could be the problem. This is not WordPress... Is it possible with jQuery? thanks

[somewebmedia]

Is it possible with jQuery?

It is if, but it would be complicated knowing on what page you currently are and then selecting that item in the menu and adding data attribute to it.

The way to go is to make the shop put those attributes on the menu items. How and can you do that, it's up to you to figure out.

But the point is, just put one data-nav-active to the last level you want to be opened. Either on the <ul> or it's parent <li> element.

[somewebmedia]

I see that your shop is generating the active class in the menu items.

So there could be 2 approaches to this:

1. Make the php also add data-nav-active to that <li> item
2. Put this script before you initiate the HC Off-canvas Nav:

   $('#main-navigation').find('li.active').attr('data-nav-active', true);

[alpin3rocker]

hi, now it works nearly perfect! Today in the Morning i did the same but i forgot the "true" - Thank you 1000 times. when the user clicked the very last item in the last submenue, The navigation opens only the first panel. Is this behaviour what it should be? Thanks for your time

[somewebmedia]

Ah I see what's happening there.

Try this:

$('#main-navigation').find('li.active').each(function() {
  var $this = $(this);
  if ($this.find('ul').length) { // has a submenu to open
    $this.attr('data-nav-active', true);
  }
  else { // last item, doesn't have submenu
    $this.closest('li').attr('data-nav-active', true);
  }
});

[alpin3rocker]

hi, yes, this function works with adding a .parent() in the else statement.

$('#main-navigation').find('li.active').each(function() {
  var $this = $(this);
  if ($this.find('ul').length) { // has a submenu to open
    $this.attr('data-nav-active', true);
  }
  else { // last item, doesn't have submenu
    $this.closest('li').parent().attr('data-nav-active', true);
  }
});

Thank you for your time and support, have a nice Day!

[somewebmedia]

Actually I think this would be more correct:

$('#main-navigation').find('li.active').each(function() {
  var $this = $(this);
  if ($this.find('ul').length) { // has a submenu to open
    $this.attr('data-nav-active', true);
  }
  else { // last item, doesn't have submenu
    $this.parent().closest('li').attr('data-nav-active', true);
  }
});

Glad I could be of help. Cheers.