Fullscreen Overlay Menu With jQuery And Animate.css

A pretty cool jQuery based site navigation system that helps you create a fullscreen overlay menu with open/close effects animated by Animate.css.

How to use it:

1. Load the needed jQuery library and Animate.css in the html file.

<link rel="stylesheet" href="/path/to/animate.min.css">
<script src="/path/to/jquery.min.js"></script>

2. Create the overlay menu with a close link as follows:

<div class="overlay">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Work</a></li>
    <li><a href="#">Testimonails</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <div class="close" id="close">X</div>

</div>

3. The required CSS styles for the overlay menu.

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: #20BF55;
  opacity: 0.8;
}

.overlay { display: none;  opacity:
}

.overlay ul {
  max-width: 500px;
  text-align: center;
  margin: 50px auto;
}

.overlay ul li {
  list-style: none;
  font-size: 30px;
  padding: 40px 0;
  border-bottom: 1px dotted #FFFFFF;
  -webkit-transition-duration: 1s; /* Safari */
  transition-duration: 1s;
}

.overlay ul li:hover {
  background: #FFFFFF;
  cursor: pointer;
  -webkit-transition-duration: 1s; /* Safari */
  transition-duration: 1s;
}

.overlay ul li a { color: #FFFFFF; }

.overlay ul li:hover a { color: #0B4F6C; }

.close {
  font-size: 40px;
  font-weight: lighter;
  position: absolute;
  color: #FFFFFF;
  top: 20px;
  right: 30px;
  cursor: pointer;
}

.show { display: block; }

.hide { display: block; }

4. A little jQuery script to toggle CSS classes on menu open / close.

$('.overlay').removeClass( "flipOutX hide" );
$('.overlay').addClass( "animated flipInX show");
$('#close').click(function() {
  $('.overlay').removeClass( "flipInX show" );
  $('.overlay').addClass( "animated hide flipOutX ");
});

---

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