/ Off-Canvas Menu

Pure CSS off-canvas menu with flexbox

Pure CSS off-canvas menu with flexbox

Pure CSS off-canvas menu with flexbox

This example 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. The menu's visibility is toggled without JavaScript using the checkbox hack.

Made with

Html
Css/SCSS

Html


Css

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

$light: #eee;
$dark: #444;
$link-color: #39b54a;
$rhythm: 16px;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  // height: 100vh;
  background: red;
}

.ie-fix {
  background: yellow;
  // display: table;
  // width: 100%;
  // min-height: 100%;
}

.wrapper {
  background: green;
  display: flex;
  // width: 100%;
  // height: 100%;
}

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

.hamburger-label {
  position: absolute;
  top: ($rhythm * 2);
  left: ($rhythm * 2);
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  font: 42px/42px fontawesome;
  text-align: center;
  color: $dark;
  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: $light;
}

.content {
  flex: 1;
  padding: ($rhythm * 4) ($rhythm * 2);
  background: $light;
  color: $dark;
  box-shadow: 0 0 5px rgba(0,0,0,1);
  transition: all .3s;
  min-height: 100vh;
}

.sidebar {
  overflow: hidden;
  width: 0;
  // height: 0;
  background: $dark;
  color: $light;
  transition: all .3s;
  display: flex;
}

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

.menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  
  li {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
    padding: $rhythm ($rhythm * 2);
    border-top: 1px solid darken($dark, 10%);
    
    &:last-child {
      border-bottom: 1px solid darken($dark, 10%);
    }
  }
}

/* Decorative styles unrelated to the demo */
body {
  font-family: 'Open Sans', sans-serif;
}
h1 {
  margin: ($rhythm * 2) 0;
  font-weight: 300;
  font-size: 200%;
}
p {
  margin: 0 0 $rhythm 0;
}
a {
  color: $link-color;
}

Author

Zoe Gillenwater

Demo

See the Pen Pure CSS off-canvas menu with flexbox by Zoe Gillenwater (@zomigi) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More