Mobile Push Nav Menu With jQuery and CSS3 Transitions

Mobile Navigation with Transitions is a simple implementation of a responsive, mobile-friendly, canvas-free push-menu with Html5, and CSS3.

multi level push menu, push sidebar menu, mobile menu jquery codepen, jquery mobile hamburger menu, jquery mobile menu, right side slide menu jquery

How to make use of it:

1. Create a normal navigation menu from an unordered list.

<header>
  <nav class="nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#">Home</a></li>
      <li class="nav-item"><a href="#">Portfolio</a></li>
      <li class="nav-item"><a href="#">Settings</a></li>
      <li class="nav-item"><a href="#">Services</a></li>
      <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

2. Insert the trigger button into the navigation menu.

<button type="button" class="nav-trigger js-nav-trigger"><span></span><span></span><span></span></button>

3. Hide the trigger button and mobile payment menu on the big screens.

.nav-trigger { display: none; }
.mobile-nav { display: none; }

4. Set the breakpoint using CSS3 media queries and select a mobile push menu style.

@media (max-width: 640px) {

header {
  right: 0;
  transition: right .5s;
}

.nav-trigger {
  display: block;
  position: absolute;
  right: 0;
  top: 8px;
  background: transparent;
  border: none;
}

.nav-trigger:focus { outline: none; }

.show-nav .nav-trigger { margin-top: 10px; }

.nav-trigger span {
  position: relative;
  display: block;
  width: 25px;
  height: 4px;
  margin: 4px 0;
  border-radius: 5px;
  background-color: #fff;
  transition: all .2s;
}

.show-nav .nav-trigger span:nth-child(1) { transform: rotate(405deg); }

.show-nav .nav-trigger span:nth-child(2) { opacity: 0; }

.show-nav .nav-trigger span:nth-child(3) {
  transform: rotate(-405deg);
  bottom: 16px;
}

.nav {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0;
  width: 50px;
  height: 50px;
}

.nav-list { display: none; }

.mobile-nav .nav-list { display: block; }

.mobile-nav {
  display: block;
  background: #2a2a2a;
  position: absolute;
  left: 100%;
  bottom: 0;
  top: 0;
  width: 80%;
  transition: left .5s;
}

.show-nav .mobile-nav { left: 20%; }

.nav-item {
  width: 100%;
  border-bottom: 1px solid #333;
}

.nav-item a .fa {
  position: absolute;
  left: 10px;
  color: #fff;
  font-size: 18px;
}

.nav-item a {
  display: block;
  padding: 15px 20px 15px 40px;
  border: none;
}

.nav-list a { color: #fff !important; }

.show-nav header { right: 80%; }

}

5. JQuery script for mobile devices list activation.

jQuery(function($){
  
  
  $('body').append($('<div class="mobile-nav"></div>').html($('.nav--list').clone()));
  

  $('.js-nav-trigger').on('click',function(event){
    event.preventDefault();
    $('body').toggleClass('show-nav');
  });
       
});

Mobile Push Menu with jQuery and CSS3 Transitions Plugin/Github


See Demo And Download

Official Website(sethabbott): Click Here

This superior jQuery/javascript plugin is developed by sethabbott. For extra Advanced Usage, please go to the official website.

Share