4

Say you have a side menu that opens from one side after clicking on an icon in a website. This menu would take more than 40% of the view-port in the horizontal direction.

If the user scrolls down, is it better to let the user click on the close button, or to hide/close the menu automatically?

  • Is the side panel for special navigation, interacting with the page or something else? – Garet Claborn Jun 13 '14 at 10:23
  • Basically it's for extra content, Google maps, a gallery, etc. – Francis Laclé Jun 14 '14 at 19:56
2

Many elements, such as light-boxes, will close if you detect a click outside of your box. One simple way to do that: toggle a bool on mouseenter and mouseleave and then on click do if(!InPanel) closePane(); This is my primary suggestion.

I think depending on the purpose of the panel, the user will sometimes want to scroll down the page to view something while changing settings in the panel. Especially if you've got some sort of live search filter and things like that. If this is not the case I think it is fine to close on scrolling - but again not if the user is inside the panel with their mouse.

While a close button can be a slight nuisance, if you make it an arrow icon inside of the border, it usually goes over pretty well to expand/collapse this way.

  • Thanks, you also brought a good point about binding a mouseleave event. – Francis Laclé Jun 14 '14 at 20:03
1

Instead of a close button, you could provide a pin button. That way you let the user dictate if the menu remains visible or slides away.

Whether the menu defaults to pinned or unpinned will depend which option makes sense for the majority of users / use cases. For example, say you default to unpinned because most users need the extra space to view content. If a user has a use case where they want to see the menu while they scroll they can pin it, otherwise it slides away.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.