August 19, 2016 at 9:01 pm #6025
Whether it’s a series of action icons or a list of clickable links, drop-down lists that appear on hover are a great way to hide options until they’re needed. A handy trick to make them work in UXPin: group ’em.
Typically we make the trigger element — an icon or bit of text — show the menu on hover. Multistate elements are a great example of this. But the menu may disappear as soon as the user’s mouse leaves the trigger icon, making the menu impossible to use.
Instead, try grouping the drop-down menu with the icon, and making the whole group hoverable. Next, hide the menu. The group will expand as the menu appears, making it reachable as your mouse covers its options — and it’ll disappear as soon as your mouse leaves.
(Attached: hiding an entire group and the final effect.)
Attachments:You must be logged in to view attached files.
You must be logged in to reply to this topic. Click here to login or register