From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Create a reveal effect using JavaScript - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Different off-screen navigation options2m 7s
-
(Locked)
Off-screen to cover navigation overview2m 43s
-
(Locked)
Set up the main grid3m 36s
-
(Locked)
Position the navigation area on the grid4m 15s
-
(Locked)
Hide the navigation area off canvas1m 50s
-
(Locked)
Create a reveal effect using JavaScript3m 45s
-
(Locked)
Improve accessibility of off-screen navigation3m
-
(Locked)
Overview of sliding navigation panel1m 15s
-
(Locked)
Create an overflowing grid3m 30s
-
(Locked)
Slide content in and out of the canvas4m 7s
-
(Locked)
Bonus: Animate the sliding effect6m 53s
-
(Locked)
-
-