php 使用Velocity.js的NavMenu下拉菜单

Posted 2021-05-05

var menuToggleOnClick = function() {
  var toggle = $(this);
  var subMenu = toggle.next('ul.sub-menu');

  if (toggle.hasClass('ion-chevron-down')) {
    subMenu.velocity('slideDown', {
      duration: 400
    });
    toggle.toggleClass('ion-chevron-down ion-chevron-up');
    $(this).parent('.menu-item-has-children').toggleClass('hover');
  } else if (toggle.hasClass('ion-chevron-up')) {
    subMenu.velocity('slideUp', {
      duration: 400
    });
    toggle.toggleClass('ion-chevron-down ion-chevron-up');
    $(this).parent('.menu-item-has-children').toggleClass('hover');
  }
};

var menuToggleOnHover = function() {
  var toggle = $(this).find('i');
  var subMenu = $(this).find('ul.sub-menu');

  if (toggle.hasClass('ion-chevron-down')) {
    subMenu.velocity('slideDown', {
      duration: 400
    });
    toggle.toggleClass('ion-chevron-down ion-chevron-up');
    $(this).toggleClass('hover');
  }
};

var menuToggleOffHover = function() {
  var toggle = $(this).find('i');
  var subMenu = $(this).find('ul.sub-menu');

  if ($(this).hasClass('hover')) {
    subMenu.velocity('slideUp', {
      duration: 400
    });
    toggle.toggleClass('ion-chevron-down ion-chevron-up');
    $(this).toggleClass('hover');
  }
};

$('.menu-item-has-children i').on('click', menuToggleOnClick);

$('.menu-item-has-children').hover(menuToggleOnHover, menuToggleOffHover);

/*** HIDE ICON BUT SHOW FOR MENU ITEMS WITH CHILDREN ***/
li {
  i.ion {
    display: none;
  }
  
  &.menu-item-has-children {
    > i.ion, > a {
      display: inline-block;
    }

    > i.ion {
      padding-left: 5px;
    }
  }
}

/*** ADD DOWN ARROW ICON TO AFTER PROPERTY ***/
function scratch_main_nav() {
  // display the wp3 menu if available
  wp_nav_menu(array(
    'container' => false, // remove nav container
    'container_class' => '', // class of container (should you choose to use it)
    'menu' => __( 'Main Nav', 'scratch' ), // nav name
    'menu_class' => 'nav main-nav', // adding custom nav class
    'theme_location' => 'main-nav', // where it's located in the theme
    'before' => '', // before the menu
    'after' => '<i class="ion ion-chevron-down"></i>', // after the menu
    'link_before' => '', // before each link
    'link_after' => '', // after each link
    'depth' => 0    // fallback function
  ));
} /* end scratch main nav */