Off Canvas CSS Menu



Mẫu menu lạ lạ share ae coi chơi

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);



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.