MenusLesson 38Free preview

Click Dropdowns

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a Click Dropdown Menu using JavaScript. Unlike the mouse-sensitive hover menu, a new dropdown click will open when the button is pressed and automatically close when the user clicks on the outside of the window.

Key points

Add event onclick to the trigger button to toggle the class .show to the menu
Class .show converts the display property to block
Listen to event window.onclick to close the dropdown if the user clicks outside the menu area
It's very user-friendly for mobile devices and touchscreen users.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.