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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

17473閲覧

開いたままのハンバーガーメニュー(ページ内リンク)を閉じたい

sanasa2

総合スコア15

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

2グッド

2クリップ

投稿2018/11/19 07:44

編集2018/11/19 09:01

前提・実現したいこと

★開いたままのページ内リンクのハンバーガーメニューを閉じたい

WEB初心者です。

1ページ完結(LP)のサイトを制作していて、
ハンバーガーメニューでフルスクリーンでメニューが出るように設定しました。
ページ内リンクで移動はしてくれるもののメニュー画面が閉じません。

指示を記述していないので当たり前ですが、
どんな指示を書いていいか分からずにいます。
追加指示文等を教えて頂ければ助かります。

該当のソースコード

HTML

1<header> 2 3 <a class="menu"> 4 <span class="menu__line menu__line--top"></span> 5 <span class="menu__line menu__line--center"></span> 6 <span class="menu__line menu__line--bottom"></span> 7 </a> 8 <nav class="gnav"> 9 <div class="gnav__wrap"> 10 <ul class="gnav__menu"> 11 <li><a href="#page1">page1</a></li> 12 <li><a href="#page2">page2</a></li> 13 <li><a href="#page3">page3</a></li> 14 </ul> 15 </div> 16 </nav> 17</header>

CSS

1/*menu*/ 2.menu{ 3 height: 20px; 4 position: absolute; 5 right: 20px; 6 top: 20px; 7 width: 30px; 8 z-index: 99; 9} 10.menu__line{ 11 background: #fff; 12 display: block; 13 height: 2px; 14 position: absolute; 15 transition:transform .3s; 16 width: 100%; 17} 18.menu__line--center{ 19 top: 9px; 20} 21.menu__line--bottom{ 22 bottom: 0; 23} 24.menu__line--top.active{ 25 top: 8px; 26 transform: rotate(45deg); 27} 28.menu__line--center.active{ 29 transform:scaleX(0); 30} 31.menu__line--bottom.active{ 32 bottom: 10px; 33 transform: rotate(135deg); 34} 35/*gnav*/ 36.gnav{ 37 background: rgba(0,0,0,0.8); 38 display: none; 39 height: 100%; 40 position: fixed; 41 width: 100%; 42 z-index: 98; 43} 44.gnav__wrap{ 45 align-items:center; 46 display: flex; 47 height: 100%; 48 justify-content: center; 49 position: absolute; 50 width: 100%; 51}

JQuery

1<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> 2 3<script> 4$('.menu').on('click',function(){ 5 $('.menu__line').toggleClass('active'); 6 $('.gnav').fadeToggle(); 7 $('.drawer').drawer('close'); 8 9$('#nav a').on('click', function() { 10 $('#nav').toggleClass('active'); 11 $(".menu").toggleClass('active'); 12}) 13 14}); 15</script>

補足情報(FW/ツールのバージョンなど)

このサイトを参考にしています。
https://webdesignday.jp/inspiration/technique/html/4746/

pappapa, mamitasuhyper👍を押しています

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2018/11/19 08:27

読み込んでいるCSSはありますか?(^^)
sanasa2

2018/11/19 09:02

ご返信頂きありがとうございます。CSSを追記いたしました。リンクの文字装飾はまだしていません。
退会済みユーザー

退会済みユーザー

2018/11/19 09:55

ありがとうございます(^^)仕事の手隙で見ようと思ってたのですが仕事が舞い込んできてしまったので、離脱させていただきます(>_<)また見れたとき回答がなかったら見てみますね!すみません!
guest

回答1

0

ベストアンサー

.menuをクリックした時と同じ処理でいいのでしょうか?
でしたら下記を追加で解決です。

js

1 // ↓ hrefの値が#から始まるa要素 2 $('a[href^="#"]').on('click', function() { 3 $('.menu').click(); // .menuをクリックした時と同じ処理 4 5 return false; //a要素のリンク先移動防ぐ 6 });

return false;は不要でしたら消してくださいね

投稿2018/11/19 14:46

編集2018/11/19 14:49
akihiro3

総合スコア955

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

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

sanasa2

2018/11/20 04:58

akihiro3さん 回答して頂きありがとうございます! 出来ました!!!! 教えて頂いたコードで、思うような動きになりました! 感謝致します。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問