From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 24,000 courses taught by industry experts.

Different off-screen navigation options

Different off-screen navigation options - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial Buy for my team

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…

Contents