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? Jun 13, 2014 at 10:23
  • Basically it's for extra content, Google maps, a gallery, etc. Jun 14, 2014 at 19:56

3 Answers 3


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. Jun 14, 2014 at 20:03

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.


There could be 2 options here:

  1. the side panel closes automatically as suggested by @GaretClaborn and then when user opens the panel again, the menu opens on the same state where you left it.

  2. The user can be warned about unsaved changes in the flyout panel if they navigate away from it. For example in the form of a mini dialogue as shown in the picture below:

For example in the form of a mini dialogue

Image source: https://2sxc.org/en/blog/post/non-blocking-are-you-sure-dialog-pattern-with-angularjs-300

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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