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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

Q&A

1回答

843閲覧

ハンバーガーボタン内のリンクをクリックした後ナビを自動で閉じるようにしたい

mimimi_665

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

0グッド

1クリップ

投稿2021/11/08 23:45

編集2021/11/09 15:07

前提・実現したいこと

1ページのみのWEBサイト作成中です。初心者です。

width:999以下でハンバーガーボタンを表示するようにしました。
ですがハンバーガーボタン内のリンクを押してもその場所には飛ぶのですが、ナビゲーションが開いたままになってしまします。

リンクを押したらナビを閉じてそのページに飛ぶようにしたいです。

該当のソースコード

html

1<header class="header"> 2 <div class="header-content-wrapper"> 3 <h1 class="nav_title"><a href="#0">AAA</a></h1> 4 <div id="open-button" class="open-button"><span></span></div> 5 <nav > 6 <div id="close-button" class="close-button">×</div> 7 <ul id="nav"> 8 <li><a href="#1">1</a></li> 9 <li><a href="#2">2</a></li> 10 <li><a href="#3">3</a></li> 11 <li><a href="#4">4</a></li> 12 </ul> 13 </nav> 14 </div> 15</header>

CSS

1@media(min-width:1000px) { 2 .header { 3 height: 83px; 4 } 5 .header-content-wrapper { 6 max-width: 1000px; 7 margin: 0 auto; 8 position: relative; 9 } 10 .header h1 { 11 font-size: 1.4rem; 12 padding-top: 26px; 13 position: absolute; 14 left: 0; 15 font-weight: 600; 16 } 17 .body_purple .header h1 { 18 font-size: 1.4rem; 19 padding-top: 26px; 20 position: absolute; 21 left: 0; 22 font-weight: 600; 23 } 24 .header nav { 25 display: block; 26 text-align: right; 27 } 28 .header nav ul { 29 display: flex; 30 justify-content: flex-end; 31 } 32 .header nav li a { 33 display: block; 34 padding: 26px 30px 0; 35 color: #404040; 36 text-decoration: none; 37 font-size: 1.0rem; 38 height: 83px; 39 } 40 .body_purple .header nav li a { 41 display: block; 42 padding: 26px 30px 0; 43 color: #f2f2f2; 44 text-decoration: none; 45 font-size: 1.0rem; 46 height: 83px; 47 } 48}

javascript

1$('.close-button, .open-button').on("click", function () { 2 $('.header nav').slideToggle(); 3 });

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

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

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

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

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

guest

回答1

0

クリックイベントの対象に、.header nav.header nav a も追加する。(close-buttonをクリックすると閉じた後開くバグに対処するためにコードを修正しました。)

js

1$('.close-button, .open-button, .header nav a').on("click", function () { 2 $('.header nav').slideToggle(); 3 });

レスポンシブ対応

追記されたCSSのメディアクエリで、画面幅1000px以上ではナビメニューを表示した状態にする。
display: block!important をつけるのが簡単でしょう。

css

1@media(min-width:1000px) { 2 3/* 略 */ 4 5 .header nav { 6 display: block !important; 7 text-align: right; 8 }

jQuery の方は、matchMedia を使うといいでしょう。

js

1$('.close-button, .open-button, .header nav a').on("click", function () { 2 if (window.matchMedia('(max-width: 1000px)').matches) { 3 $('.header nav').slideToggle(); 4 } 5});

投稿2021/11/09 00:19

編集2021/11/09 19:31
hatena19

総合スコア34075

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

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

mimimi_665

2021/11/09 00:35

早速のお返事ありがとうございます。 ハンバーガーの方はできるようになりました! ですが、width:1000px以上でハンバーガーではなく横並びのナビを設定しており、 width:1000px以上の時にaタグを押すと消えてしまうようになりました・・・;; width:1000px以上では表示のままにし、ハンバーガーのときは教えていただいたように実行するにはどうしたら良いでしょうか・・・
hatena19

2021/11/09 00:42

> ですが、width:1000px以上でハンバーガーではなく横並びのナビを設定しており、 これをどのように実装しているのかの説明とコードを質問に追記してください。
hatena19

2021/11/09 01:17

とあえず、下記でどうでしょう。 $('.close-button, .open-button, .header nav a').on("click", function () { if (window.matchMedia('(max-width: 1000px)').matches) { $('.header nav').slideToggle(); } }); ただし、メニューを閉じた状態から画面を広げた場合に再度表示させたりする処理が必要になると思います。
mimimi_665

2021/11/09 15:10

回答ありがとうございます。 教えていただいたコード試したところ、おっしゃる通りメニューを閉じた状態から画面を広げた場合にaタグが消えてしまいました。 CSSを追記しましたのでご確認いただけますでしょうか・・・!よろしくお願いいたします。
mimimi_665

2021/11/09 23:37

できました。 本当に助かりました。ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問