/ Off-Canvas Menu

Another off canvas menu using the checkbox hack to active mobile navigation

Another off canvas menu using the checkbox hack to active mobile navigation

CSS OFF CANVAS MENU

Another off canvas menu using the checkbox hack to active mobile navigation.

Made with

Html
Css/SCSS
Javascript

Html

<link href='https://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
  
<input id="toggle" type="checkbox" />

<nav class="main-nav-container" role="navigation">
    <ul class="main-nav">
      <li><a href="">List Item</a></li>
      <li><a href="">List Item</a></li>
      <li><a href="">List Item</a></li>
      <li><a href="">List Item</a></li>
      <li><a href="">List Item</a></li>
      <li><a href="">List Item</a></li>
    </ul>
</nav>

<div class="page-wrap"> 
  <div class="page-wrap-inner">
      <header>
        <label for="toggle">
          <div class="menu-icon-container">
            <div class="menu-icon">
              <div class="menu-global menu-top"></div>
              <div class="menu-global menu-middle"></div>
              <div class="menu-global menu-bottom"></div>
            </div>
          </div>
        </label>
      </header>
      <div class="content">
        <h1>Off Canvas Navigation</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsa commodi nemo nulla error porro esse in similique odio vitae delectus temporibus accusantium quis. Repellendus ad ab harum porro asperiores?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolorum quod eveniet esse repellendus magnam iusto quo quaerat iure blanditiis. Consectetur similique eos autem veniam cupiditate libero quisquam minus aliquam.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ipsa commodi nemo nulla error porro esse in similique odio vitae delectus temporibus accusantium quis. Repellendus ad ab harum porro asperiores?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates dolorum quod eveniet esse repellendus magnam iusto quo quaerat iure blanditiis. Consectetur similique eos autem veniam cupiditate libero quisquam minus aliquam.</p>
      </div>
  </div>
</div>

Css


/* mixins */

// breakpoints for responsive //

@mixin bp($point) {
  
  @if () {
    $bp-tablet: "(min-width: 760px)";
    $bp-widescreen: "(min-width: 1026px)";
    
    @if $point == widescreen {
      @media #{$bp-widescreen} { @content; }
    }
    @else if $point == tablet {
      @media #{$bp-tablet} { @content; }
    }
  }
}

// clearfix 

@mixin clearfix {
	clear: both;
	content: "";
	display: table;
}

@mixin transition($property: all, $speed: 0.55s, $timing: ease, $delay: 0) {
  transition: $property $speed $timing $delay;
}

/* variables */

$blue: #333742;
$orange: #FF5E43;
$gray: #9e9e9e;
$medium-gray: #595960;
$dark-gray: #2f313c;
$dark-blue: #2e313c;

* {
  box-sizing: border-box;
}

h1, p {
  color: white;
  font-weight: 100;
}

h1 {
  line-height: 1.2em;
}

body {
  animation: bugfix infinite 1s; // fixed android bug
  background: $dark-blue;
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  line-height: 1.5rem;
  position: relative;
}

@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

.page-wrap {
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-width: 300px;
  @include bp(widescreen) {
    padding-bottom: 300px;
  }

  &::before {
    @include bp(widescreen) {
      content: "";
      height: 100%;
      position: absolute;
      top: 149px; right: auto; bottom: auto; left: 0;
      width: 100%;
      z-index: -1;
    }
  }

  &::after {
    @include clearfix;
  }
}

.page-wrap-inner {
  float: left;
  width: 100%;
  margin-left: 0;
  transition: all 0.55s ease-in-out 0s;

  &::after {
    @include clearfix;
  }
}

header {
  height: 100px;
  position: relative;
  width: 100%;
}

/* main nav */

/* menu icon */

.menu-icon-container {
  display: block;
  float: right;
  height: 65px;
  position: relative;
  z-index: 999999;
  @include bp(tablet) {
    display: none;
  }
}
.menu-icon {
  cursor: pointer;
  height: 40px;
  position: relative;
  top: 22px; right: 20px;
  transition: all 0.15s linear;
  width: 40px;
}
.menu-global {
  backface-visibility: hidden;
  border-top: 2px solid white;
  left: 0;
  position: absolute;
  transition: all 0.15s linear;
  width: 96%;
}
.menu-top {
  top: 0px;
}
.menu-middle {
  top: 12px;
}
.menu-bottom {
  top: 24px;
}
.menu-top-click {
  top: 19px; 
  transform: rotate(48deg);
}
.menu-middle-click {
  opacity: 0;
}
.menu-bottom-click {
  top: 19px;
  transform: rotate(-48deg);
}

/* gets rid of the browser-created checkbox */

#toggle {
  position: absolute;
  left: -4000px;
}

/* styles the nav position */

.main-nav-container {
  background: $orange;
  height: 100%;
  overflow: auto;
  right: -75%;
  padding: 0;
  position: fixed;
  width: 75%;
  transition: all 0.55s ease-in-out 0s;
  @include bp(tablet) {
    float: left;
    position: static;
    background: transparent;
    padding: 0;
    height: auto;
    transition: all 0.55s ease-in-out 0s;
  }
}

/* styles the nav */
		
.main-nav {
  margin: 0;
  padding: 0;
  @include bp(tablet) {
    border: 0;
    margin-left: -380px;
    position: absolute;
    top: 70px; right: auto; bottom: auto; left: 50%;
    z-index: 100;
  }
  @include bp(widescreen) {
  	margin-left: -460px;
  }
}

.main-nav li {
	border-bottom: 1px solid darken(#555, 5%);
	display: block;
  font-size: 1.2rem;
	height: auto;
	letter-spacing: 0.1rem;
	list-style: none;
	padding: 0;
	text-align: center;
  text-transform: uppercase;
	@include bp(tablet) {
	    border: none;
	    color: $orange;
	    display: inline-block;
	    padding: 0 10px;
	}

    &:last-child {
        border: none;
    }
}
		
.main-nav li a {
  background: $orange;
  color: #353535;
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 40px 0;
  text-decoration: none;
  @include bp(tablet) {
    background: none;
    color: $orange;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 100;
    padding: 0;
    transition: all 0.55s ease-in-out 0s;
  }
  
  &:hover {
    background: darken($orange, 3%);
    @include bp(tablet) {
      background: none;
      color: white;
    }
  }
}

/* when the menu is clicked / checkbox checked */

:checked ~ .main-nav-container {
  right: 0;
  @include bp(tablet) {
    background: transparent;
    height: auto;
    float: right;
    padding: 0;
    position: static;
    width: 100%;
    transition: all 0.55s ease-in-out 0s;
  }
}

:checked ~ .page-wrap .page-wrap-inner {
  position: fixed;
  transform: translateX(-75%);
  @include bp(tablet) {
    margin-left: 0%;
    position: static;
    transition: all 0.55s ease-in-out 0s;
  }
}

.content {
    height: auto;
    padding: 10px 15px;
    width: 100%;
    @include bp(tablet) {
      margin: 0 auto;
      width: 760px;
    }
    @include bp(widescreen) {
      margin: 0 auto;
      width: 940px;
    }

    &::after {
      @include clearfix;
    }
}

Javascript

$('.menu-icon').on('click', function(event) {
   $('.menu-top').toggleClass('menu-top-click');
   $('.menu-middle').toggleClass('menu-middle-click');
   $('.menu-bottom').toggleClass('menu-bottom-click');
});

Author

Nicholas M. Smith

Demo

See the Pen CSS Off Canvas Menu by Nicholas M. Smith (@icutpeople) on CodePen.