纯css3下拉导航菜单响应式下拉二级导航菜单特效代码

使用CSS3来制作的响应式下拉导航菜单特效。该下拉导航菜单使用CSS3动画来在鼠标滑过时显示子菜单项，并且在视口变小时会切换到列表树结构。

该导航菜单的HTML结构如下：
<nav class="animenu"> 
  <button class="animenu__toggle">
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
    <span class="animenu__toggle__bar"></span>
  </button>
  <ul class="animenu__nav">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Archive</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>     
    <li>
      <a href="#">Categories</a>
      <ul class="animenu__nav__child">
        <li><a href="">Sub Item 1</a></li>
        <li><a href="">Sub Item 2</a></li>
        <li><a href="">Sub Item 3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>                 
  </ul>
</nav>
下面的jquery代码是手机端样式点击展开的实现方式
 var animenuToggle = document.querySelector('.animenu__toggle'),
		  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__toggle--active");
			toggleClass(animenuNav, "animenu__nav--open");        
		  }

	  if (!animenuToggle.addEventListener) {
		  animenuToggle.attachEvent("onclick", animenuToggleNav);
	  }
	  else {
		  animenuToggle.addEventListener('click', animenuToggleNav);
	  }