Flexbox Off Canvas Menu

Flexbox Off Canvas Menu.markdown

Flexbox Off Canvas Menu

A Pen by Youssef_ on CodePen.

License.

index.haml

.wrapper
  .sidebar
    .title
      weFix
    %ul.nav
      %li
        %a Dashboard
      %li
        %a Statistics
      %li
        %a.active Milestones
      %li
        %a Experiments
      %li
        %a Previews
      %li
        %a Assets
      %li
        %a Settings
      %li
        %a Logout
  .content.isOpen
    %a.button
    %h1 Flexbox Off Canvas Menu
    %h2 Lightweight, simple, easy to use

script.js

$(document).ready(function() {
  $('.button').on('click', function() {
    $('.content').toggleClass('isOpen');
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css');

* {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font: 12px/1 'Montserrat', sans-serif;
  color: #333;
  background: #333;
  overflow-x: hidden;
}

.wrapper {
  display: flex;
  min-height: 100%;
}

.sidebar {
  position: absolute;
  width: 500px;
}

.content {
  flex: 1;
  padding: 30px;
  background: #eee;
  box-shadow: 0 0 5px rgba(0,0,0,1);
  transform: translate3d(0,0,0);
  transition: transform .3s;
}

.content.isOpen {
  transform: translate3d(500px,0,0);
}

.button {
  cursor: pointer;
}

.button:before {
  content: '\f0c9';
  font: 42px fontawesome;
}

/* Demo Navigation */

.title {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
  //text-transform: uppercase;
  letter-spacing: 7px;
  color: #eee;
  border-bottom: 1px solid #222;
  background: #2a2a2a;
}

.nav li a {
  position: relative;
  display: block;
  padding: 15px 15px 15px 50px;
  font-size: 12px;
  color: #eee;
  border-bottom: 1px solid #222;
}

.nav li a:before {
  font: 14px fontawesome;
  position: absolute;
  top: 14px;
  left: 20px;
}

.nav li:nth-child(1) a:before { content: '\f00a'; }
.nav li:nth-child(2) a:before { content: '\f012'; }
.nav li:nth-child(3) a:before { content: '\f0e8'; }
.nav li:nth-child(4) a:before { content: '\f0c3'; }
.nav li:nth-child(5) a:before { content: '\f022'; }
.nav li:nth-child(6) a:before { content: '\f115'; }
.nav li:nth-child(7) a:before { content: '\f085'; }
.nav li:nth-child(8) a:before { content: '\f023'; left: 23px; }

.nav li a:hover {
  background: #444;
}

.nav li a.active {
  box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
  background: #444;
}

/* Demo Description */

h1 {
  margin: 25px 0 15px;
  font-size: 28px;
  font-weight: 400;
}

h2 {
  font-size: 18px;
  font-weight: 400;
  color: #999;
}