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

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

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

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

Q&A

解決済

1回答

700閲覧

jquery ページ内リンククリックでハンバーガーメニューを閉じたい

coca0127

総合スコア10

jQuery

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

0グッド

0クリップ

投稿2020/08/28 09:10

タイトルの通りで、ハンバーガーメニューをページ内リンクをクリックした際に閉じたいのですが、うまくいきません

現状のコードは以下になります。

JS

1<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script> 2 <script type="text/javascript"> 3 $(function() { 4 $('.gnav_toggle').click(function() { 5 $(this).toggleClass('active'); 6 7 if ($(this).hasClass('active')) { 8 $('.gnav').addClass('active'); 9 } else { 10 $('.gnav').removeClass('active'); 11 } 12 }); 13 }); 14 </script>

CSS

1.gnav { 2 width: 20%; 3 height: 100%; 4 position: fixed; 5 z-index: 20; 6 top: 0; 7 right: 0; 8 background: #2B2B2B; 9 color: #fff; 10 text-align: left; 11 padding: 24px; 12 transform: translateX(100%); 13 transition: all 0.6s; 14} 15 16.gnav ul { 17 width: 100%; 18 position: absolute; 19 top: 50%; 20 transform: translateY(-50%); 21 -webkit-transform: translateY(-50%); 22 -ms-transform: translateY(-50%); 23} 24 25.gnav ul li { 26 width: 100%; 27 font-size: 18px; 28 list-style-type: none; 29} 30 31.gnav ul li a { 32 display: block; 33 color: #fff; 34 padding: 1em 0; 35} 36 37.gnav_appstore { 38 39} 40 41/* このクラスを、jQueryで付与・削除する */ 42.gnav.active { 43 transform: translateX(0%); 44} 45 46.gnav_toggle { 47 display: block; 48 width: 36px; 49 height: 36px; 50 cursor: pointer; 51 z-index: 30; 52 position: absolute; 53 top: 50%; 54 bottom: 0; 55 right: 16px; 56 transform: translateY(-50%); 57 -webkit-transform: translateY(-50%); 58 -ms-transform: translateY(-50%); 59} 60 61.gnav_toggle span { 62 display: block; 63 width: 25px; 64 border-bottom: solid 2px #2B2B2B; 65 -webkit-transition: .35s ease-in-out; 66 -moz-transition: .35s ease-in-out; 67 transition: .35s ease-in-out; 68} 69 70.gnav_toggle span:nth-child(1) { 71 position: absolute; 72 top: 10px; 73 left: 50%; 74 transform: translateX(-50%); 75 -webkit-transform: translateX(-50%); 76 -ms-transform: translateX(-50%); 77} 78 79.gnav_toggle span:nth-child(2) { 80 position: absolute; 81 top: 24px; 82 left: 50%; 83 transform: translateX(-50%); 84 -webkit-transform: translateX(-50%); 85 -ms-transform: translateX(-50%); 86} 87 88/* 最初のspanをマイナス45度に */ 89.gnav_toggle.active span:nth-child(1) { 90 -webkit-transform: rotate(-45deg); 91 -moz-transform: rotate(-45deg); 92 transform: rotate(-45deg); 93 top: 17px; 94 left: 7px; 95 border-color: #fff; 96} 97 98/* 2番目と3番目のspanを45度に */ 99.gnav_toggle.active span:nth-child(2), 100.gnav_toggle.active span:nth-child(3) { 101 -webkit-transform: rotate(45deg); 102 -moz-transform: rotate(45deg); 103 transform: rotate(45deg); 104 top: 17px; 105 left: 7px; 106 border-color: #fff; 107}

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

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

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

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

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

guest

回答1

0

自己解決

すみません、解決できました

投稿2020/09/22 12:11

coca0127

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問