ドットインストールの通りにハンバーガーメニューを作っていいるのですが、うまくいきません。
どうしてでしょうか。
html
1<body> 2 <div id="menu" > 3 <ul> 4 <li>menu</li> 5 <li>menu</li> 6 <li>menu</li> 7 <li>menu</li> 8</ul> 9 </div> 10 11 <div id="main"> 12 <i id="show" class="fa fa-bars"></i> 13 <h1>Hello</h1> 14 <p>Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello </p> 15 16 <script src="practicescript.js"></script> 17 </div> 18</body> 19</html>
css
1#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 z-index: -1; 12} 13 14#main{ 15 background-color: #eee; 16 position: absolute; 17 top:0; 18 left: 0; 19 color:#333; 20 box-sizing: border-box; 21 width: 100%; 22 height:100%; 23 transition:0.4s; 24 overflow: hidden; 25} 26 27#main .menu-open{ 28 left:-180px; 29} 30 31#show{ 32 float:right; 33 cursor: pointer; 34}
javascript
1var show=document.getElementById("show"); 2var main=document.getElementById("main"); 3 4show.addEventListener("click",function(){ 5 if(main.className==="menu-open"){main.className=""; 6 7 }else{ 8 main.className="menu-open"; 9 } 10});
回答2件
あなたの回答
tips
プレビュー