ハンバーガーメニューをHTML,CSSで記述してJavascriptで動かしたいのですが動きません。
画面の右側のハンバーガーメニューを押して、左に出てきて欲しいのですが、押しても動かない状態です。
HTML
1 <div id="menu"> 2 <ul> 3 <li>MENU</li> 4 <li>MENU</li> 5 <li>MENU</li> 6 <li>MENU</li> 7 </ul> 8 9 <div id="main_2"> 10 <span id="show_second"><i class="fa fa-bars" id="show"></i></span> 11 </div> 12 13 </div> 14
CSS
1div#menu { 2 position: absolute; 3 top: 0; 4 right: 0; 5 color: #fff; 6 background: #4c81e9; 7 padding: 8px; 8 box-sizing: border-box; 9 width: 180px; 10 min-height: 100%; 11} 12 13div#main_2 { 14 z-index: 1; 15 background: #eee; 16 position: absolute; 17 top: 0; 18 left: 0; 19 color: #333; 20 padding: 8px; 21 box-sizing: border-box; 22 width: 100%; 23 height: 100%; 24 overflow: auto; 25 transition: .4s; 26} 27div#main_2.menu-open { 28 left: -180px; 29} 30span#show_second { 31 display: flex; 32 justify-content: flex-end; 33 cursor: pointer; 34}
JavaScript
1<script> 2 (function() { 3 'use strict'; 4 5 var show_second = document.getElementById('show_second'); 6 var main_2 = document.getElementById('main_2'); 7 8 show_second.addEventListener('click', function() { 9 if(main.className === 'menu-open') { 10 main.className = ''; 11 } else { 12 main.className = 'menu-open'; 13 } 14 }); 15 16 })(); 17</script>
教材と見比べても違っていることがみつからず、、、
どなたか分かる方、教えていただきたいです!
回答1件
あなたの回答
tips
プレビュー