Responsive & Animated Navigation Bar with jQuery and CSS3

A jQuery based responsive navigation bar that collapses into a toggleable drop down menu in mobile views. Animated with jQuery slideDown/slideUp and CSS3 transforms.

How to use it:

1. Create the regular horizontal navigation bar as follows.

<ul class="menu">
  <li><a>Home</a> </li>
  <li><a>Menu 1</a></li>
  <li><a>Menu 2</a>
    <ul class="submenu three">
      <li><a>Submenu 1</a></li>
      <li><a>Submenu 2</a></li>
    </ul>
  </li>
  <li><a>Menu 3</a></li>
  <li><a>About</a>
    <ul class="submenu five">
      <li><a>Contact me</a></li>
      <li><a>About me</a></li>
    </ul>
  </li>
</ul>

2. Create the mobile version of the navigation bar.

<nav class="navbar-mini-menu">
  <div class="menu-select"> <span class="menu-actual"> Menu </span> <span class="btn-select"> </span> </div>
  <ul class="mini-menu-options">
    <li><a>Home</a></li>
    <li tabIndex="0"><a>Menu 1</a></li>
    <li tabIndex="0"><a>Menu 2</a>
      <ul class="submenu five">
        <li><a>Submenu 1</a></li>
        <li><a>Submenu 2</a></li>
      </ul>
    </li>
    <li tabIndex="0"><a>Menu 3</a></li>
    <li tabIndex="0"><a>About</a>
      <ul class="submenu five">
        <li><a>Contact me</a></li>
        <li><a>About me</a></li>
      </ul>
    </li>
  </ul>
</nav>

3. Don't forget to wrap the horizontal navigation bar and the mobile toggle navigation into a parent element.

<nav class="navbar-menu">

  <!-- Menu normal -->

  <!-- Menu mobile -->

</div>

4. The basic CSS styles for the horizontal navigation bar.

.navbar-menu {
  background-color: #F08080;
  margin: 2% auto;
  max-width: 1000px;
  width: calc(100%);
}

.navbar-menu .menu {
  display: block;
  text-align: center;
}

.navbar-menu .menu li {
  display: inline-block;
}

.navbar-menu .menu li:hover > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-menu .menu li ul {
  background-color: #f08080;
  display: none;
  position: absolute;
}

.navbar-menu .menu li ul li {
  display: block;
}

.navbar-menu .menu li ul li a:active {
  -webkit-animation-name: hideSubMenu;
  -webkit-animation-duration: .4s;
}

5. The required CSS styles for the mobile toggle navigation.

.navbar-mini-menu {
  background-color: #f08080;
  display: none;
}

.navbar-mini-menu .menu-select {
  color: #fff;
  padding: 1rem 1.5rem;
}

.navbar-mini-menu .menu-select .btn-select {
  background: url("icon.png") no-repeat;
  cursor: pointer;
  position: absolute;
  height: 30px;
  width: 30px;
  right: 10px;
  top: 10px;
}

.navbar-mini-menu .mini-menu-options {
  display: block;
}

.navbar-mini-menu .mini-menu-options li {
  display: block;
}

.navbar-mini-menu .mini-menu-options li .submenu {
  display: none;
}

.navbar-mini-menu .mini-menu-options li:focus {
  outline: 0;
}

.navbar-mini-menu .mini-menu-options li:focus > .submenu {
  display: block;
  -webkit-animation-name: showSubMenu;
  -webkit-animation-duration: .4s;
}

.navbar-mini-menu .mini-menu-options li a {
  display: block;
  padding: 1rem 1.5rem;
}

6. Set the breakpoint for the responsive navigation bar using CSS3 media queries.

<pre class="brush:xml;">
1</pre>

7. Create the sub-menu show/hide animations using CSS3 transforms.

@-webkit-keyframes showSubMenu {
    0% {
      transform: scale(0,0);
    }
  100% {
    transform: scale(1,1);
  }
}

@-webkit-keyframes hideSubMenu {
  0% {
    transform: scale(1,1);
  }
  100% {
    transform: scale(0,0);
  }
}

8. Include the latest version of jQuery library at the bottom of the document.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

9. Active the responsive navigation bar.

$(document).on("ready",function() {
  // 0 = hide, 1 = visible
  var menuState = 0;
  //if($(".mini-menu-options").is(":hidden")) {
    $(".btn-select").on("click",function() {
      if(menuState === 0) {
        $(".mini-menu-options").slideDown("slow");
        menuState = 1;
      } else {
        $(".mini-menu-options").slideUp("slow");
        menuState = 0;
      }
    });
  //}
  $(".mini-menu-options li").on("click", function() {
    var numHijos = $(this).children().length;
    if(numHijos < 2) {
      // hide the menu
      $(".mini-menu-options").hide("fast");

      var texto = $(this).text();

      $(".menu-select .menu-actual").text(texto);
    }
    menuState = 0;
  });
});

---

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