Smart Responsive Dropdown Navigation Bar – Animenu

Preview:

Description:

Animenu is a lightweight responsive dropdown navigation system that collapses the horizontal navbar into a hamburger toggle menu on mobile devices.

Based on CSS3 media queries. JavaScript is used to toggle CSS classes as you click/tap the toggle button when running on the mobile device.

How to use it:

1. Load the core stylesheet style.css in the head section of the document.

<link rel="stylesheet" href="css/style.css" />

2. Create a normal dropdown navbar from a nav list.

<nav class="animenu" role="navigation" aria-label="Menu">
  <button class="animenu__btn">
    <span class="animenu__btn__bar"></span>
    <span class="animenu__btn__bar"></span>
    <span class="animenu__btn__bar"></span>
  </button>
  <ul class="animenu__nav">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">jQueryScript</a>
      <ul class="animenu__nav__dropdown" aria-label="submenu" role="menu">
        <li><a href="#" role="menuitem">jQuery Plugins</a></li>
        <li><a href="#" role="menuitem">Blog</a></li>
        <li><a href="#" role="menuitem">Contact Us</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="animenu__nav__hasDropdown" aria-haspopup="true">CSSScripnt</a>
      <ul class="animenu__nav__dropdown" aria-label="submenu" role="menu">
        <li><a href="#" role="menuitem">Vanilla JavaScript</a></li>
        <li><a href="#" role="menuitem">Pure CSS/CSS3</a></li>
        <li><a href="#" role="menuitem">Contact Us</a></li>
      </ul>
    </li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

3. The JavaScript to toggle CSS classes as you tap the hamburger toggle button.

// ES6
(() => {
  let $ = el => document.querySelector(el);
  
  $(".animenu__btn").addEventListener("click", function(){
    this.classList.toggle("animenu__btn--active")
    $(".animenu__nav").classList.toggle("animenu__nav--active")
  });
})()
// ---
// IE 10
// (function(){
//   var $ = function(el) { 
//     return document.querySelector(el); 
//   }
  
//   $('.animenu__btn').addEventListener('click', function() {
//     this.classList.toggle("animenu__btn--active")
//     $('.animenu__nav').classList.toggle("animenu__nav--active")
//   });
// })();
// ---
// IE9 / IE8
// (function(){
//   var animenuToggle = document.querySelector('.animenu__btn'),
//       animenuNav    = document.querySelector('.animenu__nav'),
//       hasClass = function( elem, className ) {
//         return new RegExp( ' ' + className + ' ' ).test( ' ' + elem.className + ' ' );
//       },
//       toggleClass = function( elem, className ) {
//         var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
//         if( hasClass(elem, className ) ) {
//           while( newClass.indexOf( ' ' + className + ' ' ) >= 0 ) {
//             newClass = newClass.replace( ' ' + className + ' ' , ' ' );
//           }
//           elem.className = newClass.replace( /^\s+|\s+$/g, '' );
//         } else {
//           elem.className += ' ' + className;
//         }
//       },           
//       animenuToggleNav =  function (){        
//         toggleClass(animenuToggle, "animenu__btn--active");
//         toggleClass(animenuNav, "animenu__nav--active");        
//       }
//   if (!animenuToggle.addEventListener) {
//     animenuToggle.attachEvent("onclick", animenuToggleNav);
//   }
//   else {
//     animenuToggle.addEventListener('click', animenuToggleNav);
//   }
// })()