Loading video...

Video Failed to Load

Go Home

The safe triangle is magical! 🤩 It's a method used to expand the target area in context menus. 🔗 Learn about it here:

87,797 views • 2 years ago •via X (Twitter)

10 Comments

Brandon McConnell's profile picture
Brandon McConnell2 years ago

Shouldn't the triangle continue to shrink with the mouse as the approach the submenu? Maybe with a buffer? If the user pauses and starts to mouse down, I would imagine it should hover the next item down

Ahmad Shadeed's profile picture
Ahmad Shadeed2 years ago

Correct, it needs more thinking on how to approach the 2nd menu item, but I suppose there is a solution for it; didn't try that yet.

Maarten van Gent's profile picture
Maarten van Gent2 years ago

Again: love the page you wrote about target sizes. Plus this technique is beautiful!

Ahmad Shadeed's profile picture
Ahmad Shadeed2 years ago

I appreciate it, thanks a lot 🙏

Quan You 𝕏's profile picture
Quan You 𝕏2 years ago

Super good article!

Carlos Espada 🦋 carlosespada.bsky.social's profile picture
Carlos Espada 🦋 carlosespada.bsky.social2 years ago

Your demos to explain CSS are the best 😍 You just play in another league 🔝🎩

Ahmad Shadeed's profile picture
Ahmad Shadeed2 years ago

Oh, that means a lot, Carlos. Thank you 🤩

Adham Dannaway's profile picture
Adham Dannaway2 years ago

Definitely a classic 👍

D7460N's profile picture
D7460N2 years ago

Dude, this is sick! Thanks!

Siddhartha Gudipati's profile picture
Siddhartha Gudipati2 years ago

One optimization can be have a time-out to remove the safe triangle, so when you are in safer are but outside the item, you can focus on other items. In this case when the focus cursor stays on "Filter by" item, and inside the safe triangle, the filter by is not clickable.

Related Videos