Animenu - a responsive dropdown navigation

(function(){
  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);
  }
})()
			
	<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="#">トップ</a>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">会社概要</a>
      <ul class="dropdown-menu">
		<li><a href="#">沿革</a></li>
		<li><a href="#">アクセス</a></li>
		<li><a href="#">スタッフ紹介</a></li>
      </ul>
    </li>     
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">事業内容</a>
      <ul class="dropdown-menu">
        <li><a href="#">PCサイト実績紹介</a></li>
        <li><a href="#">スマートフォンサイト実績紹介</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">新着情報</a>
      <ul class="dropdown-menu">
		<li><a href="#">製品関連</a></li>
		<li><a href="#">サービス関連</a></li>
	 </ul>
   </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">jQuery</a>
      <ul class="dropdown-menu">
        <li><a href="blog-top.html">Top</a></li>
        <li><a href="archive-audioplayer.html">AudioPlayer</a></li>
        <li><a href="archive-artists.html">Artists</a></li>
        <li><a href="archive-youtube.html">YouTube</a></li>
        <li><a href="archive-slideshow.html">Slideshow</a></li>
        <li><a href="archive-page-1.html">ARCHIVE</a></li>
      </ul>
    </li>                 
  </ul>
  </nav>
			
ページトップへ戻る