From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Different off-screen navigation options - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Different off-screen navigation options
[Instructor] CSS Grid opens the door to new layout and design opportunities and it also greatly simplifies some old staples of web design. In this chapter, we'll combine everything covered in this course into a webpage and add a new interactive feature to it. An accessible, off-canvas navigation that reveals itself when interacted with using Touch, Miles or keyboard interaction. We'll build two variations of this off-canvas navigation. In the first example you see here, the navigation panel will slide in on top of the page content. Once it's slid in, you can navigate through it, then if you click either on the menu button or outside the menu area, the navigation collapses again. You can also access this using the tab key on your keyboard. Here you see focus on the menu button, and when I select it the menu opens and I can navigate through the menu items. In the second navigation, the navigation panel slides in from the left shifting the right side of the page content out of view. So…
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)
-
-