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 an overflowing grid - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Create an overflowing grid
- [Narrator] In the exercise files for this movie you'll find the exact same example we've been working with so far in this chapter, the only thing I've changed is the title, so it's now called Shift-in off-canvas navigation, that's because we're going to have the navigation shift in from the left, and then have the other content shift out from the right, so we're shifting the entire view. Right now though, the menu is sliding out on top the other content just like it did before. That means I need to make some changes and here I'm going to employ my favorite development tool, which is being lazy. I want to do as little as humanly possible to make this happen. And that means I'm not touching the HTML, I'm not touching the JavaScript, all I'm doing is changing the grid layout and where things are positioned within the grid, because CSS Grid allows me to do that. Here's what that looks like. First, I need to create a new column for my menu, and I'll do that at the first media query here…
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)
-
-