JavaScript Webpage Workout - M1 Lesson 4 exercise 3

This exercise follows Lesson 4 exercise 2. Please do that lesson first for this exercise to make more sense or start from Lesson 1 if this is your first time to the course.

📺 This Lesson 4 Exercise 3 is also available as a video.

Exercise in Toggling a Side Navigation Menu

Exercise 3 will toggle between showing and hiding a side navigation menu. Here’s what you should build.

1. Create a hamburger menu icon that when clicked shows and hides a side navigation menu
2. Create a navigation menu, from top-to-bottom of the webpage, that shows and hides on the right side of the webpage.
3. The navigation menu should have some faux links and an icon to close the menu

If you’ve gone through all the lessons, you already have all the tools to build this using JavaScript to manipulate the style property or by using classList and its several methods.

Remember to keep the C-A-M-E-L work sequence in mind, especially when you find yourself wondering what to do next. Ask yourself, “Have I created all the elements I need for this project? Can I access them via JavaScript? What specifically has to happen to manipulate them (and manipulate means, what is the difference between the states of revealing the menu and hiding the menu)? Don’t forget all the CSS you know; it will come to aid you in this exercise.

You can compare your work with mine here at CodePen or watch the video.

Lesson 4 Exercise 3

Keeping practicing by going on to Lesson 4 exercise 4.