質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

455閲覧

Javascriptでハンバーガーメニューを動かしたいのですが、アイコンを押しても動きません

Teruaki0131

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/01/12 17:09

ハンバーガーメニューを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>

教材と見比べても違っていることがみつからず、、、
どなたか分かる方、教えていただきたいです!

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2020/01/12 17:24

教材とはなんの教材ですか?
Teruaki0131

2020/01/12 17:31

記載が漏れていました、すみません。 ドットインストールの「JavaScriptでハンバーガーメニューを作ろう」の06の動画(違うパターンで実装してみよう)です!
guest

回答1

0

ベストアンサー

回答

ケアレスミスですね。
main ➡ main_2に変更してください。
mainは定義してません。

if(main.className === 'menu-open') { main.className = ''; } else { main.className = 'menu-open'; }

最低限のデバッグ

JavaScriptは画面にエラーは出ないので、期待する動作にならない時は、
ブラウザのデベロッパツールでまず、エラーが出てないか確認することが最初にすることです。
デベロッパツールでは、JSだけでなく、HTMLソースやCSSの確認もできるため、期待する画面表示にならない時も必ず使うと思います。

以下、Chromeブラウザの場合の確認方法

イメージ説明

以上

投稿2020/01/12 19:00

KazuSaka

総合スコア640

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Teruaki0131

2020/01/14 13:45

非常に単純なケアレスミスでした、記述を変更したら動きました 本当にありがとうございます、、、!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問