(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>