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.
Off-screen to cover navigation overview - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Off-screen to cover navigation overview
- [Narrator] Just like with the earlier chapters I've taken a page out of the TV chef cookbook here and started the project for us to save some time. If you open the exercise files for this movie in your browser, you'll find a page that is quite similar to what we had at the end of the previous chapter. We have a header and the advanced responsive card based layout using CSS Grid in the middle. And what's new here is there's also a navigation section below the header and if we scroll down we have a sidebar and then the footer. Looking at index.html, you'll find clean structured and semantic HTML without any unnecessary containers or nesting divs. Just like before we have a body with a class site that contains our skip to content link. Then there's a header with a class mast header. That's the header. We have a section with a class main and nav and this is the navigation. Inside here we have a button that will become the trigger to open and close the menu as well as the nav itself that…
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)
-
-