🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

HTML

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

CSS

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

Q&A

1回答

1064閲覧

Javascriptで作成したハンバーガーメニューが動かないこととページがスクロールしなくなってしまいました。

korogi

総合スコア12

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/01/28 10:59

問題1
Javascriptで作成したハンバーガーメニューが動かなくて困っています。
何が問題なのかわかりませんでした、。
私なりに考えたことはuser_signed inの記述によって要素が重なってしまっていることなのかなと考えましたがz-indexをかけても変わりませんでした、

問題2
ページをしたにスクロールできなくなってしまいました、こちらの問題に関して自分の仮説検証は
cssのbody内にoverflow:hidden;が書かれていることが原因なのではと考え確認しましたがそのような記述もなく何が問題なのか特定できませんでした。、、

これらの問題を解決できる方何卒ご教授いただけたらと思います。
よろしくお願いいたします。

イメージ説明

index.html.erbになります。 <header> <title>swapapp</title> <p>あなたの欲しいがきっと見つかる</p> <% if user_signed_in? %> <div class="message"> <%= "#{current_user.nickname} is already logged in." %> <%= link_to "Logout", destroy_user_session_path, method: :delete %> </div> <%= link_to root_path do %> <%= image_tag 'note-pencil.jpeg' ,class: "link-category1"%> <% end %> <% else %> <div class="message"> <%= link_to "Create your account!", new_user_registration_path %> </div> <div class="message"> <%= link_to "Login", new_user_session_path %> </div> </header> <div class="trigger-container"> </div> <!-- ナビメニュー --> <nav id="nav"> <ul> <li><a href="#">SUMPLE1</a></li> <li><a href="#">SUMPLE2</a></li> <li><a href="#">SUMPLE3</a></li> </ul> </nav> <!-- ハンバーガーメニュー のアイコン --> <div id="hamburger">   <!-- 1番上の線 --> <span class="inner_line" id="line1"></span>   <!-- 真ん中の線 --> <span class="inner_line" id="line2"></span>   <!-- 1番下の線 --> <span class="inner_line" id="line3"></span> </div> <div class="top-image-container"> </div> <!--<%= link_to root_path do %> <%= image_tag '' ,class: "link-category1"%> --> <% end %> <% end %>
index.cssになります。 header{ z-index:1; } body{ color: #505962; font-family: 'Noto Sans JP', sans-serif; } .top-image-container { width: 100%; /*幅いっぱい!の時は100%*/ height: 100vh;/*画面に対しての高さ*/ background: url("for-swapapp.jpg") no-repeat center/cover; z-index:0; } .message { position:relative; text-align-last: end; font-family: fantasy; float } .message a { text-decoration: none; color: #000000; } h2 { text-align-last: center; } .form-text-wrap { width: 100%; margin:0 auto; } .form-text-wrap select{ display: flex; margin: 0 auto; } .input-birth-wrap p{ position :center; } .birthday{ margin: 0 auto; } .actions { text-align: center; margin: 10px; } .icon-image1 { width: 15%; height: 15%; } .link-category1 { position:relative; width: 15%; height: 15%; } .top-image-container img{ max-width:100%; width:85%; max-height: 95%; object-fit: cover; } .trigger-container { width:100%; height:; } /*以下ハンバーガーメニューのcss*/ /*ページ全体とヘッダー部*/ * { margin: 0; padding: 0; } body { /*ページ全体の背景色*/ background: #b4ada9; } header { /*ヘッダーを固定*/ position: fixed; width: 100%; height: 90px; } /*以下ナビメニュー*/ #nav{ position: absolute; top: 0; /*ナビメニューを左に隠した状態になる*/ left: -40%; width: 40%; height: 100vh; background: #ffffff; /*0.7秒かけてナビメニューがスライドする*/ transition: .7s; } #nav ul{ padding-top: 80px; } #nav ul li{ list-style-type: none; font-size: 20px; } #nav a{ display: block; text-decoration: none; color: #000000; margin: 0 15px; padding: 10px; transition: .5s; } #nav li a:hover{ color: #ffffff; background: #cd5c5c; border-bottom: none; } /*ハンバーガーメニューのアイコン*/ #hamburger { display: block; position: absolute; top: 20px; left: 30px; width: 50px; height: 44px; cursor: pointer; transition: 1s; } /*線の縦幅色など*/ .inner_line { display: block; position: absolute; left: 0; width: 50px; height: 3px; background-color: #ffffff; transition: 1s; border-radius: 4px; } /*ハンバーガーの横線*/ #line1 { top: 0; } #line2 { top: 20px; } #line3 { bottom: 0px; } /*ハンバーガーメニューの動き*/ .in{ transform: translateX(100%); } .line_1,.line_2,.line_3{ background: #000000; } .line_1 { /*-45度回転させる*/ transform: rotate(-45deg); top: 0; } .line_2 { opacity: 0; } .line_3 { /*45度回転させる*/ transform: rotate(45deg); bottom: 0; }
index.jsになります。 // Load all the channels within this directory and all subdirectories. // Channel files must be named *_channel.js. const channels = require.context('.', true, /_channel.js$/) channels.keys().forEach(channels) //ハンバーガーボタンの動き function hamburger() { document.getElementById('line1').classList.toggle('line_1'); document.getElementById('line2').classList.toggle('line_2'); document.getElementById('line3').classList.toggle('line_3'); document.getElementById('nav').classList.toggle('in'); } document.getElementById('hamburger').addEventListener('click' , function () { hamburger(); } );

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

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

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

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

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

guest

回答1

0

こんにちは。

以下は、Rubyのスクリプト部分については本質的な問題ではないと推測し、無視して回答しています。
もし、Ruby部分に問題があると考えているのであれば、タグの変更をお勧めします。


私なりに考えたことはuser_signed inの記述によって要素が重なってしまっていることなのかなと考えました

まさにその通りです。

サンプル

css

1#hamburger { 2 z-index: 999; 3}

これでも動作しないのであれば、ご提示いただいていない部分に原因があると思われます。
推測ですが、スクリプトを読みこむ位置がhead要素内だったりしませんか?


ページをしたにスクロールできなくなってしまいました

こちらは再現しませんでした。
ご提示いただいていない部分に原因があると思われます。
問題が再現するコードをご提示ください。

投稿2021/01/29 05:07

Lhankor_Mhy

総合スコア36928

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

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

korogi

2021/01/29 08:31

ご回答ありがとうございます。 結論hamburgerはz-indexでは解決しなかったもののpositon:relative;をかけて要素を分けて解決しました。しかしページのスクロール問題についてはまだ解決に至っておりません。、ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問