jQuery Plugin For Smart Fixed Bottom Navigation

A jQuery & CSS3 based smart fixed navigation that shows a menu link at the bottom of the web page as you scroll down the page. You can open or close a responsive navigation panel by clicking on the bottom menu link. As you scroll up the page, the bottom menu link will be hidden. 

How to use it:

1. Create a navigation for your web page.

<div id="cd-nav"> <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
  <nav id="cd-main-nav">
    <ul>
      <li><a href="#0">Homepage</a></li>
      <li><a href="#0">Services</a></li>
      <li><a href="#0">Portfolio</a></li>
      <li><a href="#0">Pricing</a></li>
      <li><a href="#0">Contact</a></li>
    </ul>
  </nav>
</div>

2. Add the following CSS snippet into your web page.

#cd-nav ul {
  /* mobile first */
  position: fixed;
  list-style: none;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  background: white;
  visibility: hidden;
  /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */
  overflow: hidden;
  z-index: 1;
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}

#cd-nav ul li {
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#cd-nav ul.is-visible {
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}

#cd-nav ul.is-visible li:nth-child(1) {
  /* list items animation */
  -webkit-animation: cd-slide-in 0.2s;
  -moz-animation: cd-slide-in 0.2s;
  animation: cd-slide-in 0.2s;
}

#cd-nav ul.is-visible li:nth-child(2) {
  -webkit-animation: cd-slide-in 0.3s;
  -moz-animation: cd-slide-in 0.3s;
  animation: cd-slide-in 0.3s;
}

#cd-nav ul.is-visible li:nth-child(3) {
  -webkit-animation: cd-slide-in 0.4s;
  -moz-animation: cd-slide-in 0.4s;
  animation: cd-slide-in 0.4s;
}

#cd-nav ul.is-visible li:nth-child(4) {
  -webkit-animation: cd-slide-in 0.5s;
  -moz-animation: cd-slide-in 0.5s;
  animation: cd-slide-in 0.5s;
}

#cd-nav ul.is-visible li:nth-child(5) {
  -webkit-animation: cd-slide-in 0.6s;
  -moz-animation: cd-slide-in 0.6s;
  animation: cd-slide-in 0.6s;
}

#cd-nav li a {
  display: block;
  padding: 1.6em;
  border-bottom: 1px solid #eff2f6;
}

#cd-nav li:last-child a { border-bottom: none; }
@media only screen and (min-width: 1170px) {

#cd-nav ul {
  /* the navigation moves to the top */
  position: absolute;
  width: auto;
  max-width: none;
  bottom: auto;
  top: 36px;
  background: transparent;
  visibility: visible;
  box-shadow: none;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}

#cd-nav li { display: inline-block; }

#cd-nav li a {
  opacity: 1;
  padding: .4em;
  margin-left: 1.6em;
  border-bottom: none;
}

#cd-nav li a:hover { color: #00bd9b; }

#cd-nav.is-fixed ul {
  /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */
  position: fixed;
  width: 90%;
  max-width: 400px;
  bottom: 20px;
  top: auto;
  background: white;
  visibility: hidden;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}

#cd-nav.is-fixed ul li { display: block; }

#cd-nav.is-fixed ul li a {
  padding: 1.6em;
  margin-left: 0;
  border-bottom: 1px solid #eff2f6;
}

#cd-nav ul.has-transitions {
  /* this class is used to bring back transitions when the navigation moves at the bottom right */
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}

#cd-nav ul.is-visible {
  /* this class is used to bring back the navigation animation - as on touch devices */
  visibility: visible;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0s;
  transition: transform 0.3s, visibility 0s 0s;
}

#cd-nav ul.is-hidden {
  /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}
}

.cd-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 0.25em;
  box-shadow: 0 0 10px rgba(232, 74, 100, 0.4);
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}

.cd-nav-trigger span {
  /* the span element is used to create the menu icon */
  position: absolute;
  display: block;
  width: 20px;
  height: 2px;
  background: #e84a64;
  top: 50%;
  margin-top: -1px;
  left: 50%;
  margin-left: -10px;
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}

.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
  content: '';
  position: absolute;
  left: 0;
  background: inherit;
  width: 100%;
  height: 100%;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s, background 0s;
  -moz-transition: -moz-transform 0.3s, background 0s;
  transition: transform 0.3s, background 0s;
}

.cd-nav-trigger span::before {
  top: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}

.cd-nav-trigger span::after {
  bottom: -6px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
}

.cd-nav-trigger.menu-is-open { box-shadow: none; }

.cd-nav-trigger.menu-is-open span { background: rgba(232, 74, 100, 0); }

.cd-nav-trigger.menu-is-open span::before,
.cd-nav-trigger.menu-is-open span::after { background: #e84a64; }

.cd-nav-trigger.menu-is-open span::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.cd-nav-trigger.menu-is-open span::after {
  bottom: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 1170px) {

.cd-nav-trigger {
  /* the the menu triger is hidden by default on desktop devices */
  visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s;
  -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s;
  transition: transform 0.3s, visibility 0s 0.3s;
}

.is-fixed .cd-nav-trigger {
  visibility: visible;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-animation: cd-bounce-in 0.3s linear;
  -moz-animation: cd-bounce-in 0.3s linear;
  animation: cd-bounce-in 0.3s linear;
}
}

3. Include the jQuery javascript library at the bottom of your web page.

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

4. The needed Javascript to active the smart fixed navigation. Set the offset option to specify the browser window scroll (in pixels) after which the "menu" link is shown

jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;

var navigationContainer = $('#cd-nav'),
mainNavigation = navigationContainer.find('#cd-main-nav ul');

//hide or show the "menu" link
checkMenu();
$(window).scroll(function(){
checkMenu();
});

//open or close the menu clicking on the bottom "menu" link
$('.cd-nav-trigger').on('click', function(){
$(this).toggleClass('menu-is-open');
//we need to remove the transitionEnd event handler (we add it when scolling up with the menu open)
mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible');

});

function checkMenu() {
if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
mainNavigation.addClass('has-transitions');
});
} else if ($(window).scrollTop() <= offset) {
//check if the menu is open when scrolling up
if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
//close the menu with animation
mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//wait for the menu to be closed and do the rest
mainNavigation.removeClass('is-visible is-hidden has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
});
//check if the menu is open when scrolling up - fallback if transitions are not supported
} else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
mainNavigation.removeClass('is-visible has-transitions');
navigationContainer.removeClass('is-fixed');
$('.cd-nav-trigger').removeClass('menu-is-open');
//scrolling up with menu closed
} else {
navigationContainer.removeClass('is-fixed');
mainNavigation.removeClass('has-transitions');
}
} 
}
});

---

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