On Stack Overflow I found a question: How can I make my CSS menu's hover states move horizontally for UX purposes?
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: https://jsfiddle.net/realchaseadams/Dm9Eu/4/
And the gist (https://gist.github.com/chaseadamsio/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)