4.1 Removing "navigation delay"

[ehren.]

The new 4.1 navigation is something which I will need to heavily modify on a few of my themes (both premade and custom) since a "double bar" layout simply won't be possible.

I can quite easily turn the navigation into dropdown menus using css but I need help in removing the hover/delayed class function which has been implemented for the tabs (the function which adds/removes .ipsNavBar_active to the hovered <li> after mouse movement has stopped). I won't need it for dropdown menu's and it'll give the impression of a laggy theme if the delay is still present. What's the best way to do this? Keeping in mind it needs to be achieved by a theme modification (and not a hook or file modification).

Thanks in advance!

[Flitterkill]

This is Rikki jquery stuff. I asked about the delay on the alpha site and he stated it was for preventing people from moving their mouse across/off tabs and then not having the menu they want below in place. The delay is better now but, obviously, still there. 

core.front.core.navBar but what that looks like internally we won't see until next week. From this...

<nav class="ipsLayout_container" data-controller="core.front.core.navBar">

...you can probably just delete the whole data-controller component and roll from there. 

[ehren.]

Yeah, the delay makes sense for tabs - but it won't be necessary for dropdown menus.

I'm usually a little hesitant about deleting code like that in case it's required for other purposes (or if 3rd party developers need it for hooks)..

[Flitterkill]

I would't worry about this particular one as devs can target the nav element easily enough.

As for solving the problem otherwise... The delay is in that jQuery controller so unless you remove the controller...

If you absolutely need to leave the controller in place  you *might* be able to do the following. Once we have the alpha take a look at the js controller. If, and this is a big if, the delay is coded as a variable i.e. menuDelay = .1 or something like that you could probably include a js file in your theme that only declares menuDelay = 0 to override the delay. That might work. After that you are down the rabbit hole of coding around it which means a plugin probably and then you'll need to make sure the plugin targets only your theme... not sure how easy that will be. 

[ehren.]

Your first solution sounds easiest haha.. Hopefully an IPS dev eventually replies and lets me know for sure.

[Flitterkill]

Well, I know you can override the javascript controllers with plugins super easily. If there is a function within an ips js method you can actually just drop in your own version of just the function itself in the plugin js directory and that will take precedence over the default function. Loved that when I discovered it by accident (in the way of actually trying it thinking there is no way this will work....  )

Trying to override the js controllers from just the theme side of things I'm not entirely sure. Would including a js file as a resource do the deed or will the controller still take precedence once it gets used? I guess someone will poke this soon enough and we'll know.

Don't be too surprised if you find yourself using plugins as additions to themes. It might be the only way to tackle some of the js controller conflicts though how you can target only a specific skin is something I'm still mulling over. Probably something along the line of adding an additional css data hook call to the element or your own making and then using the plugin to not only override the js data controller but also if/else so just your changes affect your theme alone and leaves the others untouched.