Navigasi bertingkat

navigasi.js

( function( $ )
/*! 
** Navigation Menu by @rafonzoo
** See details https://blog.helloraf.com/?p=1263&preview=true
** Working demo https://codepen.io/rafonzoo/pen/KxvbwX?editors=0110
** jQuery required at least ver: 1.- or higher **/ 
 {
 
  // Set up variables, includes all
  var button = $('.tombol-hamburger'),
      ariaNav = $('.navigasi-utama'),
      unitsNav = $('.punya-turunan a'),
      clickSet = $('.punya-turunan'),
      clickChld = $('.navigasi-turunan');
  
  // Set function for menu on click
  function clickAct() {
    // Add initial value
    clickSet.attr('aria-expanded', 'false');
    // On click handler
    unitsNav.on('click', function(e) {
      // Get "show" class for accessibility
      $(this).next('ul').toggleClass('show').slideToggle('fast');
      /* Gets WAI-ARIA on parent element
      ** Only if the next child has class "show" */
      $(this).parent().attr('aria-expanded', 
          $(this).next().hasClass('show'));
      // So does child element, WAI-ARIA  must be set up
      if ( $(this).next().hasClass('show') ) {
        $(this).next().attr('aria-hidden', 'false');
      } else {
        $(this).next().attr('aria-hidden', 'true');
      }
      /* 
      ** Prevent anchor location on click 
      ** Locked class to prevent **/
      if ( $('.unit-navigasi').hasClass('punya-turunan') ) {
        $('.punya-turunan').children('a').addClass('locked');
      }
      if ( $(this).hasClass('locked') ) {
        e.preventDefault(); 
      }
    }); 
    
    /* Defines function for  mobile
    ** Button handler to show menu &
    ** Set better value of WAI-ARIA */
    button.next().children('ul').attr('aria-hidden', 'true');
    button.on('click', function() {
      var _this = $(this);
      _this.next().children('ul').slideToggle('fast').attr( 'aria-hidden', _this.next().children('ul').attr( 'aria-hidden' ) === 'false' ? 'true' : 'false' );
      // Accessibility: OK
      $( this ).attr( 'aria-expanded', _this.next().children('ul').hasClass( 'show' ) );
    })    
  }     
    
  // WAI-ARIA resize handler
  $(window).on('load resize', function() {
    if ( "block" === button.css("display") ) {
      unitsNav.parent().attr('aria-hidden', 'true');      
    } else {
      unitsNav.parent().attr('aria-hidden', 'false');      
    }
  });

   /**
   ** Window width events 
   ** Prevent navigation sets to display none
   ** when the screen on resize or change 
   ** and prevent safari to stop fire resize event **/
   $(document).ready(function($) {   
       var windowWidth = $(window).width();
       /* Resize Event */
       $(window).resize(function(){
           /* Check if the window width has actually changed 
           ** and it's not just iOS triggering a resize event on scroll 
           ** Thanks for James Greig @stackoverflow 
           ** https://stackoverflow.com/a/24212316/4762528 */
           if ($(window).width() != windowWidth) {
               // Update the window width for next time
               windowWidth = $(window).width();
               if ( 'none' === button.css('display') ) {
                 $('.navigasi-utama').removeAttr('style');
               }
           }
       });
   });
  
  // Fire it all
  $(document).ready(function() {
    clickAct();
  })
  
}) ( jQuery );