Home Forums Pro tips Share your tips! Recipe for a straightforward drop-down list

  • Author
  • #6025 Score: 0
    22 pts

    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.)

    You must be logged in to view attached files.
  • #6045 Score: 0

    Tomasz Iwaniak
    12 pts

    Never thought of approaching this problem in that way. Thanks a lot Ben! 🙂

You must be logged in to reply to this topic. Click here to login or register