Pure CSS Off-Canvas Menu

The off-canvas menu is a popular design pattern used in today’s modern responsive web and app design. It’s a popular alternative to the dropdown menu, especially if you want to display more than navigation links.

To build the off-canvas menu we’ll only use HTML and CSS. That’s right, no JavaScript!

Download source files View Demo

1. Creating the HTML structure

Before we can start working, we need to set-up the project file structure and the basic mark-up.

1.1 Setting up the project

Since we’re going to create different off-canvas menu styles, we’ll use 4 style sheets to define the look of the slide menu. The style.css contains the general rules of the site and to keep an uniform look on all the browsers, we’ll use normalize.css by Nicolas Gallagher.

1.2 Basic HTML

To add some interest to the Off-canvas menu links, we’ll use some icons from Font Awesome.

2. Building the HTML

The side menu is placed in an aside tag and the navigation links in the nav tag. The menu will be toggled by the labels of a hidden checkbox. Since we’re using a checkbox, we don’t need to write a single line of Java Script!

2.1 THe Off-canvas menu HTML

Inside the body tag place the following code:

We can add a close button in the sidebar to close the menu. We’ll use a label HTML tag. Note that the label references the input’s id: offcanvas-menu . I used a close icon from Font Awesome to show the close action.

In the nav we have a collection of links and some icons.

2.2 The site content

Our content is placed in a section with a class of .content. In this section we have 2 labels that reference the checkbox input.

The first label has a class of full-screen-close and is used to close the off-canvas menu by clicking the content. To highlight the menu, we’ll apply a dark overlay on the content.

The .menu divider holds another label that targets the input checkbox. To show that this label toggles the menu, I used a hamburger icon from Font Awesome.

In the header I placed the title and a link to the previous AcasA Programming demo and a link to read the article.

The .menu-options div is used to display the 4 buttons used to switch between various slide menu styles and right or left positions.

In the .content-body div I used some placeholder text from Fillerati. You can use your own text, some lorem ipsum or other placeholder text from the sites mentioned in our resource list.

3. Adding style

Now comes the most important part of our build: adding the CSS styles.

First, we’ll hide the input checkbox and the .full-screen-close label.

To make the full-screen label clickable, we’ll give it a width and height of 100% and to indicate that the area is clickable add a cursor: pointer property.

Now it’s time to add the sliding functionality.

First, we have to style the menu-container. Set-up a background-color and a high z-index, so the menu will be visible. Now, give a width to the menu. You can give an absolute width, expressed in pixels or a relative one expressed in percentages. To hide the menu, give the margin-left a negative value. Note that the negative value must be equal to the one used in the width.

To show the menu, will use some advanced CSS selectors. The + selector is used to select an element placed immediately after the chosen element. The > selector selects all the elements inside the parent element.
If the checkbox is checked we’ll select the container placed immediately after the input and the menu-container and apply a margin-left of 0, thus showing the menu. Instead of writing a ton of Java Script, we only had to write a few lines of CSS.

We can add a nice animation effect by adding a transition property to our .menu-container and .content divs.

Now we can start styling the toggle and close buttons.

Styling the links in the menu is pretty easy:

As you can see, we added some paddings and margins to improve the design and also added background color to the hover state of our anchor tags.

At this point, we’re basically done. If you followed along, you should now have an off-canvas menu that slides from the left side of the screen. We can further improve the design by adding some media queries.

At smaller screen sizes, I decreased the font size and paddings and removed the icons.

4. Different Off-Canvas effects

To push the text when the sidebar appears on the screen, we have to add a margin-left to the content of 40% or the value you defined the menu width:

If we want the slide menu to appear from the right side of the screen, we have to modify the CSS a little bit.

Instead of having a margin-left of -40% like in the previous example, we have to set the margin-left: 100%. This will push the menu off-screen to the right side.
To show the menu, we can set the margin-left to 60%.

Pushing the content to the left when the menu appears is easy and we can apply the same technique we used before:

5. Additional styles

In the style.css I defined some general rules for the site: colors, fonts, margins and paddings. I also added some media queries to manage the layout for smaller screen sizes.

Conclusion

As you can see, creating an Off – canvas navigation menu is really easy. I chose an elegant solution to toggle the navigation without using any Java Script.
I hope this lesson was useful and I encourage you to try this techniques in your next project!