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

  • Author
    Posts
  • #6025 Score: 0
    Ben
    Ben
    Moderator
    21 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.)

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

    Tomasz Iwaniak
    Moderator
    11 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