Tạo thanh menu biến hình độc đáo với CSS3 cho Blogger của bạn

Morph Menu with CSS3

Với sự nhỏ gọn và tiện dụng, thanh menu dạng "hamburger" ngày nay đã trở nên quen thuộc và xuất hiện khá nhiều nhiều trên các website. Hôm nay Iris Tips sẽ chia sẻ với các bạn thanh menu "hamburger" như thế với, tận dụng lợi thế của CSS3 làm nên những hiệu ứng biến hình khá độc đáo. Thanh Morph Menu sau đây chắc chắn sẽ không làm bạn thất vọng.

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

@-webkit-keyframes expand{0%{-webkit-transform:translateY(0) translateZ(0);-moz-transform:translateY(0) translateZ(0);-ms-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}20%{-webkit-transform:translateY(-26px) translateZ(0);-moz-transform:translateY(-26px) translateZ(0);-ms-transform:translateY(-26px) translateZ(0);transform:translateY(-26px) translateZ(0)}46%{-webkit-transform:translateY(-26px) scaleX(1) translateZ(0);-moz-transform:translateY(-26px) scaleX(1) translateZ(0);-ms-transform:translateY(-26px) scaleX(1) translateZ(0);transform:translateY(-26px) scaleX(1) translateZ(0)}60%{-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}80%{height:3px}100%{height:70px;-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}}
@keyframes expand{0%{-webkit-transform:translateY(0) translateZ(0);-moz-transform:translateY(0) translateZ(0);-ms-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}20%{-webkit-transform:translateY(-26px) translateZ(0);-moz-transform:translateY(-26px) translateZ(0);-ms-transform:translateY(-26px) translateZ(0);transform:translateY(-26px) translateZ(0)}46%{-webkit-transform:translateY(-26px) scaleX(1) translateZ(0);-moz-transform:translateY(-26px) scaleX(1) translateZ(0);-ms-transform:translateY(-26px) scaleX(1) translateZ(0);transform:translateY(-26px) scaleX(1) translateZ(0)}60%{-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}80%{height:3px}100%{height:70px;-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}}
@-webkit-keyframes rollup{0%{height:70px;-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}20%{height:3px}46%{-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}60%{-webkit-transform:translateY(-26px) scaleX(1) translateZ(0);-moz-transform:translateY(-26px) scaleX(1) translateZ(0);-ms-transform:translateY(-26px) scaleX(1) translateZ(0);transform:translateY(-26px) scaleX(1) translateZ(0)}80%{-webkit-transform:translateY(-26px) translateZ(0);-moz-transform:translateY(-26px) translateZ(0);-ms-transform:translateY(-26px) translateZ(0);transform:translateY(-26px) translateZ(0)}100%{-webkit-transform:translateY(0) translateZ(0);-moz-transform:translateY(0) translateZ(0);-ms-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}}
@keyframes rollup{0%{height:70px;-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}20%{height:3px}46%{-webkit-transform:translateY(-26px) scaleX(3.5) translateZ(0);-moz-transform:translateY(-26px) scaleX(3.5) translateZ(0);-ms-transform:translateY(-26px) scaleX(3.5) translateZ(0);transform:translateY(-26px) scaleX(3.5) translateZ(0)}60%{-webkit-transform:translateY(-26px) scaleX(1) translateZ(0);-moz-transform:translateY(-26px) scaleX(1) translateZ(0);-ms-transform:translateY(-26px) scaleX(1) translateZ(0);transform:translateY(-26px) scaleX(1) translateZ(0)}80%{-webkit-transform:translateY(-26px) translateZ(0);-moz-transform:translateY(-26px) translateZ(0);-ms-transform:translateY(-26px) translateZ(0);transform:translateY(-26px) translateZ(0)}100%{-webkit-transform:translateY(0) translateZ(0);-moz-transform:translateY(0) translateZ(0);-ms-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}}
.menu-container{font-family:'Open Sans';font-size:1.5em;text-transform:uppercase;text-align:center;color:#e25050;position:relative;width:100px;margin:16px auto}
.menu-container .morph-menu{display:inline-block;cursor:pointer;padding-top:0.9em;position:relative}
.menu-container .morph-menu .bars-container{display:inline-block;width:20px;margin-right:-4px;margin-left:-4px;-webkit-transition:0.3s 1s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 1s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 1s all cubic-bezier(0.7,0,0.3,1)}
.menu-container .morph-menu .bars-container .bar{float:left;display:inline-block;width:20px;height:3px;margin-top:4px;position:relative;background:#e25050;-webkit-transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1)}
.menu-container .morph-menu .bars-container .bar:first-child{position:absolute;top:26px;left:24px;margin-top:0}
.menu-container .morph-menu .letter{display:inline-block;opacity:0.3;visibility:hidden;-webkit-transition:0.3s 0.001s all ease-out;-moz-transition:0.3s 0.001s all ease-out;transition:0.3s 0.001s all ease-out}
.menu-container .morph-menu .letter.m-letter{-webkit-transform:translateX(20px);-moz-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
.menu-container .morph-menu .letter.n-letter{-webkit-transition:0.3s 0.15s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.15s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.15s all cubic-bezier(0.7,0,0.3,1);-webkit-transform:translateX(-20px);-moz-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}
.menu-container .morph-menu .letter.u-letter{-webkit-transition:0.3s 0.2s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.2s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.2s all cubic-bezier(0.7,0,0.3,1);-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-ms-transform:translateX(-40px);transform:translateX(-40px)}
.menu-container .morph-menu:hover .letter{opacity:1;visibility:visible}
.menu-container .morph-menu:hover .letter.m-letter{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.menu-container .morph-menu:hover .letter.n-letter{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.menu-container .morph-menu:hover .letter.u-letter{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.menu-container .inverse-color{color:white}
.menu-container .inverse-color .bars-container .bar{background:white}
.menu-container .submenu-items{display:inline-block;width:70px;text-align:center;position:absolute;top:70px;right:22px;overflow:hidden}
.menu-container .submenu-items a{background:#556270;display:inline-block;width:70px;height:70px;-webkit-transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.001s all cubic-bezier(0.7,0,0.3,1)}
.menu-container .submenu-items a i{color:white;line-height:2.8em}
.menu-container .submenu-items a:hover{background:#e25050}
.menu-container .submenu-items.rolledup-submenu{-webkit-transition:0.56s 0.001s all ease-in;-moz-transition:0.56s 0.001s all ease-in;transition:0.56s 0.001s all ease-in;height:0}
.menu-container .submenu-items.expanded-submenu{-webkit-transition:0.56s 0.6s all ease-out;-moz-transition:0.56s 0.6s all ease-out;transition:0.56s 0.6s all ease-out;height:140px}
.expanded-menu .morph-menu .bars-container .bar:first-child{-webkit-animation:expand 0.6s ease-in-out alternate both;animation:expand 0.6s ease-in-out alternate both;-webkit-transition:0.3s 0.4s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.4s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.4s all cubic-bezier(0.7,0,0.3,1)}
.expanded-menu .morph-menu .bars-container .bar:nth-child(2),.expanded-menu .morph-menu .bars-container .bar:last-child{-webkit-transition:0.3s 0.5s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.5s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.5s all cubic-bezier(0.7,0,0.3,1);background:white}
.expanded-menu .morph-menu .bars-container .bar:nth-child(2){-webkit-transform:rotate(45deg) translateZ(0);-moz-transform:rotate(45deg) translateZ(0);-ms-transform:rotate(45deg) translateZ(0);transform:rotate(45deg) translateZ(0)}
.expanded-menu .morph-menu .bars-container .bar:last-child{-webkit-transform:translateY(-7px) rotate(-45deg) translateZ(0);-moz-transform:translateY(-7px) rotate(-45deg) translateZ(0);-ms-transform:translateY(-7px) rotate(-45deg) translateZ(0);transform:translateY(-7px) rotate(-45deg) translateZ(0)}
.expanded-menu .morph-menu .letter{opacity:0!important;visibility:hidden!important}
.expanded-menu .morph-menu .letter.m-letter{-webkit-transform:translateX(20px)!important;-moz-transform:translateX(20px)!important;-ms-transform:translateX(20px)!important;transform:translateX(20px)!important}
.expanded-menu .morph-menu .letter.n-letter{-webkit-transform:translateX(-20px)!important;-moz-transform:translateX(-20px)!important;-ms-transform:translateX(-20px)!important;transform:translateX(-20px)!important}
.expanded-menu .morph-menu .letter.u-letter{-webkit-transform:translateX(-40px)!important;-moz-transform:translateX(-40px)!important;-ms-transform:translateX(-40px)!important;transform:translateX(-40px)!important}
.expanded-menu .inverse-color{color:white}
.expanded-menu .inverse-color .bars-container .bar:nth-child(2),.expanded-menu .inverse-color .bars-container .bar:last-child{background:#e25050}
.rolledup-menu .morph-menu .bars-container .bar:first-child{-webkit-animation:rollup 0.6s 0.6s ease-in-out alternate both;animation:rollup 0.6s 0.6s ease-in-out alternate both;-webkit-transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1)}
.rolledup-menu .morph-menu .bars-container .bar:nth-child(2),.rolledup-menu .morph-menu .bars-container .bar:last-child{-webkit-transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1);-moz-transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1);transition:0.3s 0.6s all cubic-bezier(0.7,0,0.3,1)}

2Tiếp tục tìm đến thẻ </body> và dán đoạn js bên dưới vào trước thẻ đó.

<script type='text/javascript'>
$('.morph-menu').on('click', function(){
  $('.menu-container').toggleClass('expanded-menu').toggleClass('rolledup-menu');
  $('.submenu-items').toggleClass('rolledup-submenu').toggleClass('expanded-submenu');
});
</script>

3Thêm thư viện jQuery ở bên dưới vào sau đoạn js ở bước 2 nếu website của bạn chưa có.

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

4Đặt đoạn HTML sau đây vào vị trí bạn muốn menu hiển thị

<div class="menu-container rolledup-menu">
  <div class="morph-menu">
    <span class="m-letter letter">M</span>
    <div class="bars-container clearfix">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
    <span class="n-letter letter">n</span><span class="u-letter letter">u</span>
  </div><!-- iris-tips-morph-menu -->
  <div class="submenu-items rolledup-submenu">
    <a href="http://iris-tips.blogspot.com/" class="services-toggle"><i class="fa fa-home"></i></a>
    <a href="http://iris-tips.blogspot.com/p/contact.html" class="contact-toggle"><i class="fa fa-envelope-o"></i></a>
  </div>
</div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Mohsen Khakbiz/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm