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

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

詳細はこちら
メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

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

HTML

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

CSS

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

Q&A

解決済

1回答

1871閲覧

ページ内リンクを押した際にドロワーメニューの表示を消したい。

yonepi

総合スコア2

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

jQuery

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/02/19 06:39

編集2021/02/19 06:59

ページ内リンクを押した際にドロワーメニューの表示を消したい。

ドロワーメニューからページ内リンクで移動した際にメニューが開きっぱなしになってしまいます。
リンク先に飛んだタイミングでドロワーメニューを閉じるにはどうしたら良いでしょうか?
自分でもやり方を調べたのですが、初心者ゆえ解決できなかったので、教えて頂きたいです。

該当のソースコード

HTML

1 <div class="sp_navi"> 2 <div class="wrapper"> 3 <div class="menu-trigger"> 4 <span></span> 5 <span></span> 6 <span></span> 7 </div> 8 <nav class="menu"> 9 <ul> 10 <li><a href="#About">About</a></li> 11 <li><a href="#Menu">Menu</a></li> 12 <li><a href="#News">News</a></li> 13 <li><a href="#Access">Access</a></li> 14 <li><a href="contact.html">Contact</a></li> 15 </ul> 16 </nav> 17 <div class="overlay"></div> 18 </div> 19 </div>

css

1 2.wrapper { 3 height: 100%; 4 overflow-x: hidden; 5 position: relative; 6} 7 8.overlay { 9 content: ""; 10 display: block; 11 width: 0; 12 height: 0; 13 background-color: rgba(0, 0, 0, 0.5); 14 position: absolute; 15 top: 0; 16 left: 0; 17 z-index: 2; 18 opacit 19 transition: all .5s; 20 display: flex; 21 flex-direction: column; 22 23} 24 25main.open { 26 transform: translateX(-250px); 27} 28 29.menu-trigger { 30 display: inline-block; 31 widthy: 0; 32 transition: opacity .5s; 33} 34 35.overlay.open { 36 width: 100%; 37 height: 100%; 38 opacity: 1; 39} 40 41main { 42 height: 100%; 43: 36px; 44 height: 28px; 45 vertical-align: middle; 46 cursor: pointer; 47 position: fixed; 48 top: 33px; 49 right: 40px; 50 z-index: 100; 51 @media(max-width: 399px) { 52 right:10px; 53 } 54 /* transform: translateX(0); 55 transition: transform .5s; 56 */ 57} 58 59/* .menu-trigger.active { 60 transform: translateX(-250px); 61} 62 */ 63 64.menu-trigger span { 65 display: inline-block; 66 box-sizing: border-box; 67 position: absolute; 68 left: 0; 69 width: 100%; 70 height: 4px; 71 background-color: #000; 72 transition: all .5s; 73} 74 75.menu-trigger.active span { 76 background-color: #fff; 77} 78 79.menu-trigger span:nth-of-type(1) { 80 top: 0; 81} 82 83.menu-trigger.active span:nth-of-type(1) { 84 transform: translateY(12px) rotate(-45deg); 85} 86 87.menu-trigger span:nth-of-type(2) { 88 top: 12px; 89} 90 91.menu-trigger.active span:nth-of-type(2) { 92 opacity: 0; 93} 94 95.menu-trigger span:nth-of-type(3) { 96 bottom: 0; 97} 98 99.menu-trigger.active span:nth-of-type(3) { 100 transform: translateY(-12px) rotate(45deg); 101} 102 103nav { 104 width: 250px; 105 height: 100%; 106 padding-top: 100px; 107 background-color: #e74e4fbf; 108 position: fixed; 109 top: 0; 110 right: 0; 111 z-index: 10; 112 transform: translate(250px); 113 transition: all .5s; 114} 115 116nav.open { 117 transform: translateZ(0); 118} 119 120nav li { 121 color: #fff; 122 text-align: center; 123 padding: 10px 0; 124 list-style: none; 125 126 127 a { 128 color: white; 129 text-decoration: none; 130 } 131 132

jquery

1 <script> 2 $('.menu-trigger').on('click', function() { 3 if ($(this).hasClass('active')) { 4 $(this).removeClass('active'); 5 $('main').removeClass('open'); 6 $('nav').removeClass('open'); 7 $('.overlay').removeClass('open'); 8 } 9 else { 10 $(this).addClass('active'); 11 $('main').addClass('open'); 12 $('nav').addClass('open'); 13 $('.overlay').addClass('open'); 14 } 15 }); 16 $('.overlay').on('click', function() { 17 if ($(this).hasClass('open')) { 18 $(this).removeClass('open'); 19 $('.menu-trigger').removeClass('active'); 20 $('main').removeClass('open'); 21 $('nav').removeClass('open'); 22 } 23 }); 24 </script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

投稿2021/02/19 06:52

Lhankor_Mhy

総合スコア36946

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

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

yonepi

2021/02/19 07:02

ご回答ありがとうございます。 もちろん自分でも方法を調べた上で解決を試みたのですが、初心者ゆえ上手くいかずに質問させて頂いた次第です…。
Lhankor_Mhy

2021/02/19 07:09

上手くいかなかったコードをご提示いただけますか?
yonepi

2021/02/19 07:21

たった今、自己解決することができました。 お力添え頂き、ありがとうございました。
Lhankor_Mhy

2021/02/19 07:29

ご解決されて何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問