How to Close a Toggle Menu with an Outside Click

Est. Reading Time: 2 minute

Adding a toggle menu is nice and straight forward with your preference of CSS or jQuery, but when you want to be able to click outside of the menu and close you will need to add a little more jQuery functionality.

This option adds a few extra lines of jQuery, but overall very simple way to close the menu when clicking outside the menu button area or the expanded menu, itself.

Please note, in this example we use specific areas instead of on “document” click. It can cause issues in certain browsers, depending on the options setup for the toggle menu. The example assumes you already have the toggle menu in place.

jQuery Example:

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.