On Stack Overflow I found a question: How can I make my CSS menu’s hover states move horizontally for UX purposes?
Unfortunately, this solution can’t be purely CSS.
It helps to approach this problem by thinking about the flow of the interaction:
- A user hovers over an element in a navigation bar.
- If this is the first hover into the navigation bar, move a highlighter to the current navigation element’s position and width.
- If there was another element that has been hovered already, move the highlighter to the element’s position and width.
- The user moves out of the navigation bar.
- Move the highlighter out of sight.
With a pure CSS solution, one element’s interaction can effect another unnested element’s actions.
Here’s a JSFiddle of what the asker was trying to achieve: http://jsfiddle.net/realchaseadams/Dm9Eu/4/
And the gist (https://gist.github.com/realchaseadams/7281682) for the code:
How would you have solved this problem? Create a JSFiddle or a gist and share it, I’d love to see how other people solve this problem!
Original Question: How can I make my CSS menu’s hover states move horizontally for UX purposes? (StackOverflow Question)