Building a prediction cone for dropdown menus
Dropdown submenus close the moment your cursor drifts diagonally. A triangle drawn from cursor to submenu edges fixes it, but making it feel right takes more than geometry.
Building a prediction cone for dropdown menus Right-click on your desktop. Hover over a menu item that has a submenu. Now move your cursor diagonally toward that submenu. It stays open. The parent stays highlighted. Everything feels solid and predictable. This works so effortlessly in native apps that you've probably never thought about it. But try doing the same thing in most web-based dropdown menus and something breaks. The submenu vanishes mid-flight. You overshoot, retry, and eventually learn to move your cursor in an awkward L-shape (right first, then down) to avoid triggering the wrong
Explore this link on the map →related reading
- Bastiat's famous Candlestick makers' Petitionbastiat.org
- Crashing cars and improving hover detection | Motion Magazinemotion.dev
- Grainradgrainrad.com
- Transitions.dev — Essential transitions for web appstransitions.dev
- Raindrop.ioapp.raindrop.io
- Mediumdonhopkins.medium.com
- Sorrel Salb | Are.naare.na
- GitHub - PatrickJS/awesome-cursorrules: 📄 Configuration files that enhance Cursor AI editor experience with custom rules and behaviors · GitHubgithub.com
- CSS Basic User Interface Module Level 3 (CSS3 UI)drafts.csswg.org
- Dia Browser's gradientarlan.me
- There's nothing to watchnothing-to-watch.port80.ch
- The Floor Has Risen — Tolu Olubodetolu.design