From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Overview of sliding navigation panel

Overview of sliding navigation panel - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Overview of sliding navigation panel

“

- [Instructor] In the previous example, we created an off-canvas menu that floated in to place itself on top of the other content. We did this by drawing a grid, wrapping all the content, then manually positioning the navigation panel grid item in the same column as the main content and sliding it off-canvas using relative positioning and the left property. In this next example, we'll do something different. Here, when the navigation panel slides in from the left, the other content slides out of canvas on the right-hand side of the viewport. To achieve this, we'll create a two-column layout where the first column is the width of the navigation panel and the second column takes up the full viewport width -1M to allow the navigation panel to peek out on the left-hand side. This gives us a total grid that is wider than the viewport, which will cause horizontal scrolling. To prevent that, we'll set the overflow-x property to Hidden so the browser ignores anything overflowing. Then we'll…

Contents