Creating A Pure CSS Off-canvas Menu Using Flexbox

Category: CSS & CSS3 , Menu & Navigation | October 3, 2014
Author: zomigi
Views Total: 9,162 views
Official Page: Go to website
Last Update: October 3, 2014
License: MIT

Preview:

Creating A Pure CSS Off-canvas Menu Using Flexbox

Description:

A mobile app-style vertical sidebar off-canvas navigation system created by zomigi that is made only with CSS & CSS3. It uses flexbox to control the layout so that when the menu becomes visible, the content area can resize to fit the remaining width in the viewport, instead of overflowing the viewport and getting cut off on the right side, as happens with most off-canvas menus.

Basic Usage:

Create a hamburger icon for the menu toggle button using checkbox input.

<input id="hamburger" type='checkbox' class="hamburger-checkbox">
<label for="hamburger" class="hamburger-label" role="button" aria-labelledby="menu">&#xf0c9;</label>

The CSS to style the toggle button.

.hamburger-checkbox {
  position: absolute;
  opacity: 0;
}

.hamburger-label {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  font: 42px/42px fontawesome;
  text-align: center;
  color: #444;
  cursor: pointer;
}

.hamburger-checkbox:checked ~ .hamburger-label:before {
  content: '\f00d';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  font: 42px/42px fontawesome;
  text-align: center;
  color: #eee;
}

.hamburger-checkbox:checked ~ .sidebar {
  width: auto;
  height: auto;
  padding-top: 6.5em;
}

Create the off-canvas menu using unordered list

<nav class="sidebar">
  <ul class="menu">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
  </ul>
</nav>

The CSS/CSS3 rules to active the off-canvas menu.

.sidebar {
  overflow: hidden;
  width: 0;
  height: 0;
  background: #444;
  color: #eee;
  transition: all .3s;
}

.menu { list-style: none; }

.menu li {
  padding: 16px 32px;
  border-top: 1px solid #2b2b2b;
}

.menu li:last-child { border-bottom: 1px solid #2b2b2b; }

You Might Be Interested In:


One thought on “Creating A Pure CSS Off-canvas Menu Using Flexbox

Leave a Reply