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.
Hide the navigation area off canvas - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Hide the navigation area off canvas
- [Instructor] The next step is to grab the entire navigation area plus this menu button here and shift it to the left so it shifts off-canvas. And we can do this by simply changing the left position of these items because they're relatively positioned inside the grid. And that means if we shift them to the left, it doesn't expand the width of the available content in the viewport, so we don't get left and right scrolling. Let me show you what I mean. If I go into the main-nav rule here and simply say left: -13em and click save, you'll see this nav area shift over to the lefthand side, still a little bit of it peeking out because there's some padding on this element. That's why we can shift it to 13 to the left even though it's only 12 ems wide. But the important thing is, we don't have horizontal scroll bars. So this is literally shifted off-canvas without changing the width of the grid at all. We're relatively positioning it away from its original position without changing the grid.…
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)
-
-