Q&A
どの様にうまくいかないのでしょうか？
ドットインストールの通りにハンバーガーメニューを作っていいるのですが、うまくいきません。
どうしてでしょうか。
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件
0
ベストアンサー
完成版のコードを取得して自分のコードと比較してみます。
head部分がなく、Font Awesomeが読み込まれていなかったので、head部分を必要最低限の部分だけ追加しておきました。ここは、ご自身のコードで大丈夫なので気にしないでください。
動くサンプル
どの様な機能を実装したいのかは、分からないのですがアイコンをクリックしたらメニューが開く様にはしておきました。
##問題点
なぜ、メニューが押されていなかったか解説します。
提示してもらったjsのコードをみる限りハンバーガーアイコン、#show がついたものをクリックしたときに .menu-open を #main につけると記述されていますが、menu-openというclassがHTMLではありません。おそらくそれが原因でしょう。
JavaScript
1if(main.className==="menu-open")
HTML
1<body class="menu-open">
動くサンプルで、全文のコードを確認する事ができます。お確かめください。
投稿2020/01/20 11:25
退会済みユーザー
総合スコア0
0
ドットインストール「JavaScriptでハンバーガーメニューを作ろう」の
「#09 ハンバーガーメニューを完成させよう」
からソースコード完成版を入手して実行したら、正しくハンバーガーメニューが動作しました。
「自分のコードと比較する」ボタンでソースコードの比較ができますから、
どこが違うかチェックしてみてください。
投稿2020/01/19 15:44
総合スコア7234
どうして、うまくいかないのか
という質問の答えになっていない様ですが。
＞ドットインストールの通り作っている
作っていません。
HTMLに<HEAD>部が無く、不完全です。
まずはコースの指示通りに学習しましょう。
htmlの終了タグが下にある事から、該当部分だけを貼りつけているだけで、headはあるのでは？
なければ、そこから
仰る通りで、該当部分のみ張り付けております。
サイトから、完成版のコードを取得して自分のコードと比較してみます。
ありがとうございました。
>仰る通りで、該当部分のみ張り付けております。
了解です。
解決していない様なので、回答しておきます。
あなたの回答
tips
プレビュー
