Navigation/interaction issue

I’m having some trouble with the navigation. I’m working on a test page now, /test-new-navigation. The idea is that when you hover over one of the titles (Services or Information), a div box will slide in from the left. Then, when you hover off the box, it will slide back into place off-screen. There seems to be an issue when hovering over Information, then trying to hover over Services. I suppose this is because you’re technically not hovering out of the div.

Hopefully I’m explaining this correctly for someone to see what I mean. Is there any sort of workaround for this?


Here is my public share link: LINK (Go to the page Test New Navigation)
(how to access public share link)

Looking at your link, I noticed on your interactions, you have only set up a hover over state…I didn’t see anything on the hover out state. The hover over interaction part works fine. The menu slides in from the left but if you hover out of it, it will stay open because theres no hover out. Sorry if I’m misunderstanding what you’re looking for.

There is a hover out, but it’s on a different element. I don’t want the menu to go away when I hover off the nav link.

Current interactions with the navigation:

  • Hover over for the services nav link that moves the services nav div into view
  • Hover over for the information nav link that moves the information nav div into view
  • Hover out for the services nav div that moves it back out of view
  • Hover out for the information nav div that moves it back out of view

The problem is when you hover over one of the nav links, then immediately hover over the other without putting your cursor over one of the divs that slides in. Because your cursor hasn’t hovered over it yet, you’re technically not hovering out of it. If I set up the hover out for the nav link, the menu will immediately go away if you try putting the cursor over the menu because you have hovered out. Right?

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.