Flexible Fullscreen Navigation Menu with jQuery and CSS3

A responsive, flexible navigation built with jQuery and CSS3 that displays an animated menu in a fullscreen modal-like popup window.

See also:

• Responsive & Dynamic Full Screen Navigation Plugin - fullpagenav
• Fullpage Animated Menu Plugin with jQuery and CSS3 - Full Page Menu

How to use it:

1. Create the Html for a navigation icon to toggle the fullscreen menu.

<a href="#" class="menu-toggle navicon menu1"> <span></span> <span></span> <span></span> </a>

2. The CSS to style and animate the navigation icon using CSS3 transitions and transforms.

.menu1 {
  cursor: pointer;
  display: inline-block;
  font-size: 5px;
  height: 6em;
  position: relative;
  width: 6em;
  -webkit-tap-highlight-color: transparent;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}

.menu1 span {
  display: block;
  background: #fff;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  backface-visibility: hidden;
  height: 0.8em;
  position: absolute;
  -moz-transition: all 200ms ease-in-out;
  -o-transition: all 200ms ease-in-out;
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}


.menu1 span { left: 0; }

.menu1 span:nth-child(1) { top: 1em; }

.menu1 span:nth-child(2) { top: 2.6em; }

.menu1 span:nth-child(3) { top: 4.2em; }

.menu1.open span:nth-child(1) {
  -moz-transform: rotate(45deg) translate(1.1em, 1.1em);
  -ms-transform: rotate(45deg) translate(1.1em, 1.1em);
  -webkit-transform: rotate(45deg) translate(1.1em, 1.1em);
  transform: rotate(45deg) translate(1.1em, 1.1em);
}

.menu1.open span:nth-child(2) {
  opacity: 0;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.menu1.open span:nth-child(3) {
  -moz-transform: rotate(-45deg) translate(1.1em, -1.1em);
  -ms-transform: rotate(-45deg) translate(1.1em, -1.1em);
  -webkit-transform: rotate(-45deg) translate(1.1em, -1.1em);
  transform: rotate(-45deg) translate(1.1em, -1.1em);
}

3. Create the Html for a navigation menu.

<nav class="menu off">
  <ul class="nav">
    <li><a href="#0">Home</a></li>
    <li><a href="#0">About</a></li>
    <li><a href="#0">Blog</a></li>
    <li><a href="#0">Contact</a></li>
  </ul>
</nav>

4. The CSS styles for the navigation menu.

.menu {
  position: fixed;
  overflow-y: auto;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background: rgba(237, 225, 204, 0.9);
  border-top: 1px solid #3D3527;
  -moz-transition: opacity 800ms;
  -o-transition: opacity 800ms;
  -webkit-transition: opacity 800ms;
  transition: opacity 800ms;
}

.menu.off {
  opacity: 0;
  z-index: -1;
  -moz-transition: opacity 0;
  -o-transition: opacity 0;
  -webkit-transition: opacity 0;
  transition: opacity 0;
}

.menu .nav,
.menu .nav li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.menu .nav a {
  display: block;
  position: relative;
  z-index: 3;
  width: 100%;
  background: transparent;
  border-bottom: 1px solid #3D3527;
  color: #3D3527;
  font-size: 300%;
  letter-spacing: 1vw;
  line-height: 33.33333vh;
  text-decoration: none;
  text-transform: uppercase;
}

.menu .nav a:hover,
.menu .nav a:focus {
  background: rgba(61, 53, 39, 0.9);
  color: #EDE1CC;
  -moz-transition-property: background-color, color;
  -o-transition-property: background-color, color;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  -moz-transition-duration: 800ms;
  -o-transition-duration: 800ms;
  -webkit-transition-duration: 800ms;
  transition-duration: 800ms;
}

.menu-toggle {
  position: fixed;
  z-index: 2;
  right: 0;
  top: 0;
  margin: 4% 6%;
}

.menu-toggle > span { background: #EDE1CC; }

.menu-toggle.open { background: #3D3527; }

5. Include the latest version of jQuery javascript library at the end of the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

6. Enable the fullscreen menu with a little Javascript.

$(function(){

  $('.menu-toggle').on('click', function(e){
    e.preventDefault();
    $('.menu').toggleClass('off');
  });

  $('.navicon').on('click', function() {
    $(this).toggleClass('open');
  });

});

---

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