Click Anywhere to Close

There's one small flaw with that drop-down menu, and that is the expectations that users have. If they open the menu and then decide that they don't want to go to any of those pages, they have to click again on the header to close the menu. Most people are used to being able to click anywhere else on the page to close an open menu.

Doing that is cool and worthwhile, but tricky and requires some additional concepts. The first concept is putting an event handler on the whole document (the top of the DOM tree). That event handler will close the open menu. Try this:

Note that we named the function closeAll, because it will close any open menu on the screen.