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.

Slide content in and out of the canvas

Slide content in and out of the canvas - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents