Off Canvas CSS Menu

Chia sẻ

---

1. HTML

<nav>
  <ul>
    <li>
      <i class="icon-tools"></i>
      <h4>TOOLS</h4>
    </li>
    <li>
      <i class="icon-cog"></i>
      <h4>SETTINGS</h4>
    </li>
    <li>
      <i class="icon-lifebuoy"></i>
      <h4>LEARN</h4>
    </li>
    <li>
      <i class="icon-air"></i>
      <h4>WAVES</h4>
    </li>
    <li>
      <i class="icon-suitcase"></i>
      <h4>TRAVEL</h4>
    </li>
  </ul>
</nav>
<div class="container"><div class="menu-icon"><span></span></div></div>

2. CSS

@import "compass/css3";

*, *::before, *::after { @include box-sizing(border-box) }

$shadowlength: 60;

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through $shadowlength {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}

@mixin longshadow($color) {
  text-shadow: makelongshadow($color);
}

@import url(https://markmurray.co/codepen/customstyle.css), url(https://fonts.googleapis.com/css?family=Raleway:100);

html, body {
  background: #111;
  height: 100%;
  font-family: Raleway, sans-serif;
}

.container {
  background: #eff0f1;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  @include transition(all 0.3s ease 0.6s);
  z-index: 10;
  padding: 2em;
  position: relative;
  
}

.container.nav-open {
  margin-top: 8em;
  width: 90%;
  @include transition(all 0.3s ease);
}

/*
  menu icon css3
*/

.menu-icon {
  position: relative;
  display: block;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
	
  
  &:hover span {
    background: #222;
    
    &:before, &:after { background: #222; }
  }
}

.menu-icon > span {
  position: absolute;
  top: 50%;
  display: block;
  width: 100%;
  height: 0.25em;
  background-color: lighten(#222, 60%);
  border-radius: 3px;
  @include transition(transform 0.3s, background 0.25s ease);
}

.menu-icon > span:before,
.menu-icon > span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: lighten(#222, 60%);
  border-radius: 3px;
  @include transition(transform 0.3s, background 0.25s ease);
}

.menu-icon > span:before {
	   @include transform(translateY(-0.75em));
}

.menu-icon > span:after {

	   @include transform(translateY(0.75em));
}

/* OPENED */

.menu-icon.open {
  -webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.menu-icon.open > span:before {
  -webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

.menu-icon.open > span:after {
  -webkit-transform: rotate(90deg);
	        transform: rotate(90deg);
}

nav {
  position: fixed;
  top: 0; left: 5%;
  color: white;
  z-index: 1;
  
  ul {
    
    li.animate {
      top: 0;
    }
    
    li {
      display: inline-block;
      text-align: center;
      margin: 1em 2em;
      cursor: pointer;
      position: relative;
      top: -8em;
      $speed: 0.3s;
      $icons: 3;
      
      &:nth-child(1){ @include transition(top $speed ease 0.15s); }
      &:nth-child(2){ @include transition(top $speed ease 0.2s); }
      &:nth-child(3){ @include transition(top $speed ease 0.25s); }
      &:nth-child(4){ @include transition(top $speed ease 0.3s); }
      &:nth-child(5){ @include transition(top $speed ease 0.35s); }
      
      
      &:hover { opacity: 1; }
      
      i {
        font-size: 1.5em;
        background: #10d7af;
        padding: 0.75em;
        border-radius: 50%;
        color: white;
        display: inline-block;
        overflow: hidden;
        @include longshadow(rgba(12, 168, 136, 1));
      }
      
      h4 {
        line-height: 2.5;
      }
    }
  }
  
}

3. JAVASCRIPT

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

(function($){
  
  $(".menu-icon").on("click", function(){
    	$(this).toggleClass("open");
    	$(".container").toggleClass("nav-open");
    	$("nav ul li").toggleClass("animate");
  });
  
})(jQuery);

---