Responsive Fullscreen Overlay Navigation with jQuery and Velocity.js

A simple jQuery approach to create a responsive, animated, perspective overlay navigation covering the whole webpage when toggled, animated with Velocity.js JavaScript animation engine.

How to use it:

1. Wrap your Html list based navigation menu into an overlay container.

<div class="overlay">
  <nav role="navigation">
    <ul>
      <li><a href="#">jQuery Plugins</a></li>
      <li><a href="#">Featured Plugins</a></li>
      <li><a href="#">Popular Plugins</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</div>

2. The CSS to style the overlay.

.overlay {
  background-color: #e74c3c;
  position: fixed;
  z-index: 120;
  top: 150px;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  display: none;
  overflow: hidden;
  text-align: left;
}

3. The sample CSS to style the navigation.

.overlay nav {
  perspective: 1200px;
  height: 100%;
}
.overlay ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 500px;
  max-width: 100%;
  left: 50%;
  top: 50%;
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
}
.overlay li {
  border-bottom: 1px solid #fff;
  position: relative;
  padding: 0;
}
.overlay a {
  font-size: 40px;
  line-height: 40px;
  display: block;
  color: #fff;
  text-transform: uppercase;
  padding: 8px 0;
  text-decoration: none;
}

4. Create a link to toggle the fullscreen overlay navigation.

<a href="#" class="toggler">Toggle nav</a>

5. Include the latest version of jQuery library & Velocity.js JavaScript animation engine at the end of the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

6. The Javascript to enable the animated & responsive overlay navigation.

var count = 0;
var $overlay = $('.overlay');
var $links = $overlay.find('ul')

$links.velocity({ 
  opacity: 0.4,
  translateY: '-75%',
  translateX: '-50%',
  rotateX: '35deg'
}, 0);

$('.toggler').click(function()
                  {
  if ( ++count % 2 === 1 )
  {
    // Show
    $overlay
      .velocity('stop')
      .velocity('fadeIn', 300);

    $links
      .velocity('stop')
      .velocity({ 
        opacity: 1,
        translateY: '-50%',
        translateX: '-50%',
        rotateX: '0deg'
      }, 500);
  }
  else
  {
    // Hide
    $links
      .velocity('stop')
      .velocity({ 
        opacity: 0.4,
        translateY: '-25%',
        rotateX: '-35deg'
      },
      {
        duration: 250,
        complete: function(elements)
        {
          $links.velocity({ 
            translateY: '-75%',
            rotateX: '35deg'
          }, 0);
        }
      });

    $overlay
      .velocity('stop')
      .velocity('fadeOut', {
        duration: 200
      });
  }

  return false;
});

setTimeout(function(){
  $('.toggler').trigger('click');
}, 500);

---

This awesome jQuery plugin is developed by TommySorensen. For more Advanced Usages, please check the demo page or visit the official website.