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:
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)
Hey, I'm Chase. I help aspiring entrepreneurs and makers turn their ideas into digital products and apps.
A figma community project of vectorized hand-drawn arrows.Go To Figma
A figma community project of vectorized hand-drawn lines.Go To Figma
A figma community project of vectorized hand-drawn shapes.Go To Figma
Subscribe to my Newsletter
Every other week I publish the Curiously Crafted newsletter.
In it, I explore the intersection of curiosity and craft: the people who make stuff, what they make and the way they pursue the craft of making.
I'm on almost all social media as @curiouslychase.