Fullsreen Sticky Popup Menu With jQuery And CSS3

A Material Design inspired, mobile-friendly navigation system that displays a sticky popup menu with a fullscreen background overlay when triggered. Powered by jQuery, CSS and CSS3 transitions.

How to use it:

1. Create the popup navigation menu from an html list as follows:

<ul class="my-nav my-nav--list">
  <div id="wrapper-templates">
    <li class="my-nav__item">
       <a class="my-nav__link">Home</a> 
    </li>
    <li class="my-nav__item">
      <a class="my-nav__link">About</a> 
    </li>
    <li class="my-nav__item">
      <a class="my-nav__link">Contact</a> 
    </li>
    ...
  </div>
</ul>

2. Create a trigger button to toggle the popup menu.

<a class="btn btn__trigger btn__trigger--views" id="trigger">Menu</a>

3. Style & position the menu toggle button.

.btn {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
}

.btn__trigger {
  transition: box-shadow 300ms ease-in-out;
  position: fixed;
  z-index: 10;
  bottom: 1.5rem;
  right: 1.5rem;
  display: block;
  border-radius: 50px;
}

.btn__trigger--views {
  width: 4rem;
  height: 4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  background-color: #F44336;
  color: #fff;
  font-size: 1rem;
  line-height: 4;
  font-weight: lighter;
  text-align: center;
}

.btn__trigger--views:hover { box-shadow: 0 14px 10px rgba(0, 0, 0, 0.24), 0 10px 10px rgba(0, 0, 0, 0.24); }

4. The core CSS/CSS3 styles for the popup menu.

.my-nav {
  position: fixed;
  opacity: 0;
}

.my-nav.reveal {
  visibility: visible;
  opacity: 1;
}

.my-nav.reveal:after {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  content: "";
  background-color: rgba(42, 196, 159, 0.7);
}

.my-nav--list {
  visibility: hidden;
  bottom: 6.5rem;
  right: 1.75rem;
  text-align: right;
}

.my-nav__item {
  transition: opacity 150ms ease-in-out;
  display: block;
  font-size: 0.90rem;
  opacity: 0;
}

.my-nav__item.visible {
  visibility: visible;
  opacity: 1;
}

.my-nav__link {
  transition: background-color 150ms ease-in-out;
  display: inline-block;
  width: auto;
  margin: 1rem 0;
  padding: 0.25rem 0.5rem;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 25px;
  color: #fff;
}

.my-nav__link:last-child { margin-bottom: 0; }

5. Load the latest version of jQuery library in the webpage.

<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> 

6. The JavaScript

function displayList () {
  $.fn.reverse = [].reverse;
  var trigger = $("#trigger"),
      mainTarget = $(".my-nav"),
      targetItem = $('.my-nav__item'),
      html = $("html");

  trigger.on("click", function(event) {
    mainTarget.toggleClass("reveal unreveal");

    targetItem.reverse().each(function(i, el) {
      setTimeout(function() {
      $(el).toggleClass("visible");
      }, i * 68);
    })

    html.on("click", function() {
      targetItem.removeClass("visible");
      mainTarget.removeClass("reveal");
    });

    event.preventDefault();
    event.stopPropagation();
  });
}

$(document).on('page:load', displayList);
$(document).ready(displayList);

---

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