原生js响应式带动画特效的侧边栏导航菜单特效代码

使用方法

// hasClass
function hasClass(elem, className) {
  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

// addClass
function addClass(elem, className) {
  if (!hasClass(elem, className)) {
    elem.className += ' ' + className;
  }
}

// removeClass
function removeClass(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, '');
  }
}

// toggleClass
function toggleClass(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;
  }
}

//document.getElementById('navicon').onclick = function() {
    //toggleClass(this, 'js_is-active');
//}

var menu = document.querySelector('.main-nav'),
    navicon = document.querySelector('.navicon'),
	overlay = document.querySelector('.overlay');

navicon.onclick = function() {
	toggleClass(this, 'js_is-active');
    toggleClass(menu, 'js_show-menu');
	toggleClass(overlay, 'js_show-overlay');
};

overlay.onclick = function() {
	removeClass(navicon, 'js_is-active');
	removeClass(menu, 'js_show-menu');
	removeClass(this, 'js_show-overlay');
}