Closing Door Menu

Introduction

This effect is inspired by the Enjoy Aiia menu effect. It’s a closing door menu where 2 sides of the menu come together offscreen to create the final menu. I’ve created 4 variations, 2 vertical and 2 horizontal menus, each with 2 different animations: normal and bounce.

Closing Door Menu Structure

This is the horizontal style. It has a left menu with text links, and a right part of the menu with icon links. Also the middle logo can also be a brand link.

<div class="menu">
  <div class="left-menu">
    <a class="menu-button" href="#"><i class="fa fa-times"></i>Close Menu</a>
    <ul>
      <li><a href="">Important Link 1</a></li>
      <li><a href="">Important Link 2</a></li>
      <li><a href="">Other Link</a></li>
      <li><a href="">Social Media Link</a></li>
    </ul>
    <div class="circle"><a href="http://www.webdesigncrowd.com"><img src="http://www.webdesigncrowd.com/wp-content/themes/tanzaku/images/logo.png"></a></div>
  </div>

  <div class="right-preview">
    <a href=""><img src="images/icon-book.png"></a>
    <a href=""><img src="images/icon-clock.png"></a>
    <a href=""><img src="images/icon-pencil.png"></a>
  </div>
</div>

CSS Style

Here is the style for the horizontal menu. Basically it achieves the effect using transitions.

/* Closing Door Menu */

.menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
  /* Horizontal */
  .menu .left-menu {
    width: 30%;
    height: 100%;
    position: absolute;
    display: table;
    border-right: 1px solid #444;
    z-index: 1;
    left: -50%;
    background-color: #444;

    -webkit-transition: .4s;
    transition: .4s;
  }
    .menu .left-menu a.menu-button {
      position: absolute;
      left: 0;
      right: 0;
      top: 20px;
      text-align: center;
      font-size: 11px;
      text-transform: uppercase;
    }
      .menu .left-menu a.menu-button i { 
        font-size: 28px; 
        margin: -3.5px 10px 0 0;
        vertical-align: middle;
      }
    .menu .left-menu ul {
      display: table-cell;
      width: 100%;
      vertical-align: middle;
      text-align: left;
    }
    .menu .left-menu li {
      font-size: 28px;
      line-height: 30px;
      margin: 10px;
    }
    .menu.in .left-menu { left: 0; }
    .menu.bounce.in .left-menu {
      -moz-animation-name:bounce-right;
      -moz-animation-duration:.8s;
      -moz-animation-fill-mode:backwards;
      
      -webkit-animation-name:bounce-right;
      -webkit-animation-duration:.8s;
      -webkit-animation-fill-mode:backwards;
      
      animation-name:bounce-right;
      animation-duration:.8s;
      animation-fill-mode:backwards;
    }
    .menu .circle {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: #CCC;
      
      position: absolute;
      top: 50%;
      right: 0;
      margin-right: -75px;
      margin-top: -75px;
    }
      .menu .circle a {
        position: relative;
        top: 50px;
        margin: 0;

        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        /* IE 5-7 */
        filter: alpha(opacity=80);
        /* Netscape */
        -moz-opacity: 0.8;
        /* Safari 1.x */
        -khtml-opacity: 0.8;
        /* Good browsers */
        opacity: 0.8;
      }

  .menu .right-preview {
    width: 70%;
    height: 100%;
    position: absolute;
    right: -70%;
    background-color: #ffb9b5;
    z-index: 0;

    -webkit-transition: .4s;
    transition: .4s;
  }
    .menu .right-preview a {
      position: relative;
      top: 50%;
      margin-top: -64px;
      height: 128px;
      display: inline-block;
      padding: 0 50px;
      -webkit-transition: .2s;
      transition: .2s;
    }
     .menu .right-preview a:hover {
        top: 48%;
      }
    .menu.in .right-preview { right: 0; }
    .menu.bounce.in .right-preview {
      -moz-animation-name:bounce-left;
      -moz-animation-duration:.8s;
      -moz-animation-fill-mode:backwards;
      
      -webkit-animation-name:bounce-left;
      -webkit-animation-duration:.8s;
      -webkit-animation-fill-mode:backwards;
      
      animation-name:bounce-left;
      animation-duration:.8s;
      animation-fill-mode:backwards;
    }

Bounce Animation

Here is the keyframe animation for the horizontal bounce animation. It basically uses alternating ease-in, ease-out animations to bring the menu down and back up and down so it looks like it’s bouncing.

@-webkit-keyframes bounce-right {
  0%  { left:-30%; -webkit-animation-timing-function:ease-in;  }
  37%   { left:0; -webkit-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -webkit-animation-timing-function:ease-in;  }
  73%   { left:0; -webkit-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -webkit-animation-timing-function:ease-in;  }
  91%   { left:0; -webkit-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -webkit-animation-timing-function:ease-in;  }
  100%  { left:0; }
}
@-moz-keyframes bounce-right {
  0%  { left:-30%; -moz-animation-timing-function:ease-in;  }
  37%   { left:0; -moz-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -moz-animation-timing-function:ease-in;  }
  73%   { left:0; -moz-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -moz-animation-timing-function:ease-in;  }
  91%   { left:0; -moz-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -moz-animation-timing-function:ease-in;  }
  100%  { left:0; }
}
@keyframes bounce-right {
  0%  { left:-30%; -moz-animation-timing-function:ease-in;  }
  37%   { left:0; -moz-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -moz-animation-timing-function:ease-in;  }
  73%   { left:0; -moz-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -moz-animation-timing-function:ease-in;  }
  91%   { left:0; -moz-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -moz-animation-timing-function:ease-in;  }
  100%  { left:0; }
}

/* left */
@-webkit-keyframes bounce-left {
  0%  { right:-70%; -webkit-animation-timing-function:ease-in;  }
  37%   { right:0; -webkit-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -webkit-animation-timing-function:ease-in;  }
  73%   { right:0; -webkit-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -webkit-animation-timing-function:ease-in;  }
  91%   { right:0; -webkit-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -webkit-animation-timing-function:ease-in;  }
  100%  { right:0; }
}
@-moz-keyframes bounce-left {
  0%  { right:-70%; -moz-animation-timing-function:ease-in;  }
  37%   { right:0; -moz-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -moz-animation-timing-function:ease-in;  }
  73%   { right:0; -moz-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -moz-animation-timing-function:ease-in;  }
  91%   { right:0; -moz-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -moz-animation-timing-function:ease-in;  }
  100%  { right:0; }
}
@keyframes bounce-left {
  0%  { right:-70%; -moz-animation-timing-function:ease-in;  }
  37%   { right:0; -moz-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -moz-animation-timing-function:ease-in;  }
  73%   { right:0; -moz-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -moz-animation-timing-function:ease-in;  }
  91%   { right:0; -moz-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -moz-animation-timing-function:ease-in;  }
  100%  { right:0; }
}

jQuery

The jQuery’s job is only to toggle z-indexes at the beginning and end of the animation.

(function($){
	$(function(){
	  
		$('.menu-button').click(function (e){
			e.preventDefault();
			var menu = $('.menu');

			if (menu.hasClass('in')) {
				setTimeout(function (){
					menu.css('z-index', '-1');
				}, 400); // how long do you want the delay to be? 	
			}
			else {
				menu.css('z-index', '1');
			}

			menu.toggleClass('in');

		});

	}); // end of document ready
})(jQuery); // end of jQuery name space

The post Closing Door Menu appeared first on webdesigncrowd.com.

Closing Door Menu

Introduction