Categories
CSS HTML JavaScript

Creating A Basic Sliding Menu with JavaScript

In this exercise, you will learn how to create a sliding-down menu for small screens.

In it, you will learn about:

  • adding JavaScripts to your pages
  • adding buttons
  • styling buttons
  • css opacity
  • pointer events
  • fixed positioning
  • z-index
  • css transforms, including translate()

First, please download the starter files.

Set them up as a new project in your editor (likely Visual Studio Code).

Now, please watch this Loom video series.

Please start with the video that has Start Here! in the title, then proceed to the “numbered” videos.

Note: in the Connecting the JavaScript video, I ask you to paste in some JS. Please just write the JS: you can use what’s on screen in the video.