From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a reveal effect using JavaScript

Create a reveal effect using JavaScript - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Create a reveal effect using JavaScript

“

- [Instructor] In the previous movie, we moved the navigation panel off screen using relative positioning and the left property. That means moving it back into it's original position is a matter of resetting this left property. This needs to be done both for the main nav element and for the fixed trigger button since it's fixed to the view port not the main nav element. The cleanest way of making this happen is to use JavaScript to toggle a class on the body element depending on whether the navigation area is hidden or displayed. Let's call that class reveal. If the reveal class is present, the left property of main nav is reset to zero. At the same time, the left property of the trigger is set to 14.5. You'll remember this is the value we figured out when we were positioning the items to display on top of the other content earlier. So I'll grab that from the original code, paste it down here and take away the comments. Now I can go over to my browser and just experiment to see that…

Contents