Tạo Menu xoay vòng 3D với CSS3 và jQuery

Hôm nay, trong bài viết này, iZdesigner sẽ chia sẻ cho các bạn một mẫu menu với hiệu ứng 3D cực đẹp và chuyên nghiệp. Chúng tôi tin chắc là các bạn sẽ áp dụng rất nhiều cho các mẫu thiết kế web của các bạn sau này.

HTML
Để tạo được menu, các bạn cần có khung chuẩn html với 3 phần như sau :
– Phần header dùng để chứa button , khi người dùng click vào button này, nó sẽ hiển thị menu.

<header class="cd-header">
        <a href="#0" class="cd-3d-nav-trigger">
            Menu
            <span></span>
        </a>
    </header> <!-- .cd-header -->

– Phần thứ 2 sẽ là nội dung trên trang web hay blog.

<main>
    <!-- all your content here -->
</main>

Phần thứ 3 sẽ là danh sách các menu mà chúng ta muốn có trên trang web.

<nav class="cd-3d-nav-container">
        <ul class="cd-3d-nav">
            <li class="cd-selected">
                <a href="#0">Dashboard</a>
            </li>

            <li>
                <a href="#0">Projects</a>
            </li>

            <li>
                <a href="#0">Images</a>
            </li>

            <li>
                <a href="#0">Settings</a>
            </li>

            <li>
                <a href="#0">New</a>
            </li>
        </ul> <!-- .cd-3d-nav -->

        <span class="cd-marker color-1"></span>
    </nav> <!-- .cd-3d-nav-container -->

CSS
Bây giờ là lúc chúng ta định dạng hiển thị cho từng phần bằng CSS. Đầu tiên là phần header.

.cd-header {
  height: 80px;
  width: 90%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .cd-header:after {
    content: "";
    display: table;
    clear: both; }
  .cd-header.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    .cd-header.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); } }

.cd-3d-nav-trigger {
  position: relative;
  float: right;
  height: 45px;
  width: 45px;
  margin-top: 18px;
  /* replace text with background image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent; }
  .cd-3d-nav-trigger span,
  .cd-3d-nav-trigger span::before,
  .cd-3d-nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
    width: 28px;
    height: 3px;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .cd-3d-nav-trigger span {
    /* this is the central line */
    top: 21px;
    left: 8px;
    -webkit-transition: background 0.2s 0.5s;
    -moz-transition: background 0.2s 0.5s;
    transition: background 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
      /* these are the upper and lower lines */
      content: '';
      left: 0;
      -webkit-transition: -webkit-transform 0.2s 0.5s;
      -moz-transition: -moz-transform 0.2s 0.5s;
      transition: transform 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before {
      bottom: 8px; }
    .cd-3d-nav-trigger span::after {
      top: 8px; }
  .nav-is-visible .cd-3d-nav-trigger span {
    /* hide line in the center */
    background-color: rgba(255, 255, 255, 0); }
    .nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
      /* keep visible other 2 lines */
      background-color: white; }
    .nav-is-visible .cd-3d-nav-trigger span::before {
      -webkit-transform: translateY(8px) rotate(-45deg);
      -moz-transform: translateY(8px) rotate(-45deg);
      -ms-transform: translateY(8px) rotate(-45deg);
      -o-transform: translateY(8px) rotate(-45deg);
      transform: translateY(8px) rotate(-45deg); }
    .nav-is-visible .cd-3d-nav-trigger span::after {
      -webkit-transform: translateY(-8px) rotate(45deg);
      -moz-transform: translateY(-8px) rotate(45deg);
      -ms-transform: translateY(-8px) rotate(45deg);
      -o-transform: translateY(-8px) rotate(45deg);
      transform: translateY(-8px) rotate(45deg); }

Trong đoạn css bên trên, chúng ta có định dạng cho một số class không có sẵn ở khung html, đây là những class sẽ được jQuery tự động chèn vào khi chúng ta nhấn nút hiển thị menu. Chúng ta sẽ tiếp tục định dạng css cho phần menu chính.

.cd-3d-nav-container {
  /* this is the 3D navigation container */
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  background-color: #000000;
  visibility: hidden;
  /* enable a 3D-space for children elements */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  transition: transform 0.5s 0s, visibility 0s 0.5s; }
  .cd-3d-nav-container.nav-is-visible {
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
    transition: transform 0.5s 0s, visibility 0.5s 0s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav-container {
      height: 170px; } }

.cd-3d-nav {
  /* this is the 3D rotating navigation */
  position: relative;
  height: 100%;
  background-color: #343c55;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s; }
  .cd-3d-nav::after {
    /* menu dark cover layer - to enhance perspective effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    transition: opacity 0.5s 0s, visibility 0.5s 0s; }
  .cd-3d-nav li {
    height: 100%;
    width: 20%;
    float: left; }
    .cd-3d-nav li:first-of-type a::before {
      background-image: url(../img/icon-1.svg); }
    .cd-3d-nav li:nth-of-type(2) a::before {
      background-image: url(../img/icon-2.svg); }
    .cd-3d-nav li:nth-of-type(3) a::before {
      background-image: url(../img/icon-3.svg); }
    .cd-3d-nav li:nth-of-type(4) a::before {
      background-image: url(../img/icon-4.svg); }
    .cd-3d-nav li:nth-of-type(5) a::before {
      background-image: url(../img/icon-5.svg); }
  .cd-3d-nav a {
    position: relative;
    display: block;
    height: 100%;
    color: transparent;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s; }
    .cd-3d-nav a::before {
      /* navigation icons */
      content: '';
      height: 32px;
      width: 32px;
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: auto;
      right: auto;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background-size: 32px 64px;
      background-repeat: no-repeat;
      background-position: 0 0; }
    .no-touch .cd-3d-nav a:hover {
      background-color: #2b3145; }
  .cd-3d-nav .cd-selected a {
    background-color: #212635; }
    .no-touch .cd-3d-nav .cd-selected a:hover {
      background-color: #212635; }
    .cd-3d-nav .cd-selected a::before {
      background-position: 0 -32px; }
  .nav-is-visible .cd-3d-nav {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }
    .nav-is-visible .cd-3d-nav::after {
      /* menu cover layer - hide it when navigation is visible */
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      transition: opacity 0.5s 0s, visibility 0s 0.5s; }
  @media only screen and (min-width: 768px) {
    .cd-3d-nav a {
      padding: 7.6em 1em 0;
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* truncate text with ellipsis if too long */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cd-3d-nav a::before {
        top: 4.4em;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }

.cd-marker {
  /* line at the bottom of nav selected item */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 20%;
  background-color: currentColor;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateZ(0) rotateX(90deg);
  -moz-transform: translateZ(0) rotateX(90deg);
  -ms-transform: translateZ(0) rotateX(90deg);
  -o-transform: translateZ(0) rotateX(90deg);
  transform: translateZ(0) rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
  .cd-marker::before {
    /* triangle at the bottom of nav selected item */
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 0;
    width: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit; }
  .nav-is-visible .cd-marker {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }

/* these are the colors of the markers - line + arrow */
.color-1 {
  color: #9a57bd; }

.color-2 {
  color: #c96aa4; }

.color-3 {
  color: #d6915e; }

.color-4 {
  color: #5397c7; }

.color-5 {
  color: #77cd91; }

Cuối cùng là phần nội dung.

main {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  main h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
    color: #ffffff;
    margin: 2em auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  main.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-width: 768px) {
    main.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); }
    main h1 {
      font-size: 3.6rem;
      margin: 4em auto; } }

jQuery
Việc cuối cùng mà các bạn cần làm là copy đoạn script sau để hiệu ứng có thể chạy được.

jQuery(document).ready(function($){
    //toggle 3d navigation
    $('.cd-3d-nav-trigger').on('click', function(){
        toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
    });

    //select a new item from the 3d navigation
    $('.cd-3d-nav a').on('click', function(){
        var selected = $(this);
        selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
        updateSelectedNav('close');
    });

    $(window).on('resize', function(){
        window.requestAnimationFrame(updateSelectedNav);
    });

    function toggle3dBlock(addOrRemove) {
        if(typeof(addOrRemove)==='undefined') addOrRemove = true;
        $('.cd-header').toggleClass('nav-is-visible', addOrRemove);
        $('main').toggleClass('nav-is-visible', addOrRemove);
        $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
    }

    //this function update the .cd-marker position
    function updateSelectedNav(type) {
        var selectedItem = $('.cd-selected'),
            selectedItemPosition = selectedItem.index() + 1,
            leftPosition = selectedItem.offset().left,
            backgroundColor = selectedItem.data('color');

        $('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
            'left': leftPosition,
        });
        if( type == 'close') {
            $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                toggle3dBlock(false);
            });
        }
    }

    $.fn.removeClassPrefix = function(prefix) {
        this.each(function(i, el) {
            var classes = el.className.split(" ").filter(function(c) {
                return c.lastIndexOf(prefix, 0) !== 0;
            });
            el.className = $.trim(classes.join(" "));
        });
        return this;
    };
});

Chúng tôi hy vọng với bài viết này, các bạn sẽ có thêm một chút sáng tạo cho trang web hay blog của mình với những hiệu ứng mới và độc cho khách hàng hay người dùng.