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.
Slide content in and out of the canvas - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Slide content in and out of the canvas
- [Instructor] At this point my grid is exactly 14 ems wider than the available view port and if you change the width of the view port you'll notice that it's still always wider than the available view port. As a result we get horizontal scrolling and it's this horizontal scrolling we'll use to create this reveal function. So basically when we load the view we want to see this where the menu is over here on the left hand side in hidden away from the canvas and then when you click the menu button you want the scroll action to happen and then your slide is in on the left hand side and the content slide is out on the right, but I want to do this without actually having the scroll bar at the bottom to ruin everything. For this we can use a really simple trick. We just tell the browser to ignore anything that's outside of the view port. So back in my style sheet here in the site rule I'll say overflow X, so that would be the X axis, horizontal axis, hidden. Save that, go back in the…
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)
-
-