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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

jQuery

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

Q&A

解決済

1回答

3096閲覧

ページ内リンクで、sectionに遷移すると、ハンバーガーメニューを閉じるように実装したい。

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

jQuery

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

0グッド

0クリップ

投稿2020/02/26 02:15

編集2020/02/26 02:44

前提・実現したいこと

どうしても自己解決が難しかったため、アドバイス頂けますと幸いです。
html.cssでハンバーガーメニューを作っています。

  • シングルページで、「各#sectionにページ内リンクすると、ハンバーガーメニュー(ドロワー)が閉じる」という動作を実現したいです。

 (×から通常の三に戻す)

発生している問題・エラーメッセージ

ページ内リンクした時に、メニューを閉じさせたかったため
jQueryで下記を記述したところ、

ページ内リンク後に、ハンバーガーメニューを収束することはできたのですが、
ハンバーガーメニューが「×」になったままで、ハンバーガーメニューをクリックしても配下のメニューが開かないという状態になってしまいました。
(三 ⇄ × 切り替えのcssだけ動作しています。)

該当のソースコード

jQuery

1$('#global-nav ul li a').click(function() { 2 3 /* メニューを収束 */ 4 $('#global-nav').slideUp(function() { 5 }); 6

試したこと

メニューを収束しただけではダメといいますが、絶対何かが足りず、nav-toggleに対してもremoveClassする必要があるのではないか等、
考えたのですが、具体的な解決策を見出せず、ハマってしまいました。

お手数ですが、ご教示頂けますと幸いです。
よろしくお願いいたします。

補足情報

html

1<header id="top-head"> 2 <div class="inner"> 3 <div id="mobile-head"> 4 <h1 class="logo"><img src="images/sample_logo.png" width="142" height="80" alt="logo"></h1> 5<div id="nav-toggle"> 6 <div> 7 <span></span> 8 <span></span> 9 <span></span> 10 </div> 11 </div> 12 </div><!---mobile-head end --> 13 <nav id="global-nav" role="navigation"> 14 <div id="gnav-container"> 15 <ul id="gnav-ul" class="clearfix"> 16 <li><a href="#section1">section1</a></li> 17 <li><a href="#section2">#section2</a></li> 18 <li><a href="#section3">#section3</a></li> 19 <li><a href="#section4">#section4</a></li> 20 </ul> 21 </div> 22

css

1#global-nav { 2 position: absolute; 3 top: -500px; 4 background: #eeee; 5 width: 100%; 6 text-align: center; 7 padding: 5px 0; 8 -webkit-transition: .5s ease-in-out; 9 -moz-transition: .5s ease-in-out; 10 transition: .5s ease-in-out; 11 } 12 #global-nav ul { 13 list-style: none; 14 position: static; 15 right: 0; 16 bottom: 0; 17 font-size: 14px; 18 } 19 #global-nav ul li { 20 float: none; 21 position: static; 22 padding: 18px 0; 23 color: #fff; 24 } 25 #top-head #global-nav ul li a, 26 #top-head.fixed #global-nav ul li a { 27 width: 100%; 28 display: block; 29 color: #333333; 30 padding: 18px 0; 31 } 32 #nav-toggle { 33 display: block; 34 right: 25px; 35 top: 20px; 36 } 37 /* #nav-toggle 表示切り替え */ 38 .open #nav-toggle span:nth-child(1) { 39 top: 11px; 40 -webkit-transform: rotate(315deg); 41 -moz-transform: rotate(315deg); 42 transform: rotate(315deg); 43 } 44 .open #nav-toggle span:nth-child(2) { 45 width: 0; 46 left: 50%; 47 } 48 .open #nav-toggle span:nth-child(3) { 49 top: 11px; 50 -webkit-transform: rotate(-315deg); 51 -moz-transform: rotate(-315deg); 52 transform: rotate(-315deg); 53 } 54 /* #global-nav メニューをスライド */ 55 .open #global-nav { 56 /* #global-nav top + #mobile-head height */ 57 -moz-transform: translateY(556px); 58 -webkit-transform: translateY(556px); 59 transform: translateY(556px); 60 } 61 62

※ ハンバーガーメニューのスクリプト(追記)

script

1$(function() { 2 var $header = $('#top-head'); 3 // Nav Fixed 4 $(window).scroll(function() { 5 if ($(window).scrollTop() > 250) { 6 $header.addClass('fixed'); 7 } else { 8 $header.removeClass('fixed'); 9 } 10 }); 11 // Nav Toggle Button 12 $('#nav-toggle').click(function(){ 13 $header.toggleClass('open'); 14 }); 15 });

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

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

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

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

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

kei344

2020/02/26 02:25

(質問文は編集できます)「ハンバーガーメニュー」のスクリプトも質問文に提示してください。
退会済みユーザー

退会済みユーザー

2020/02/26 02:28

抜けており、失礼いたしました。 下記になります。よろしくお願い申し上げます。 ```script $(function() { var $header = $('#top-head'); // Nav Fixed $(window).scroll(function() { if ($(window).scrollTop() > 250) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); // Nav Toggle Button $('#nav-toggle').click(function(){ $header.toggleClass('open'); }); }); ```
azuapricot

2020/02/26 02:34

id = top-head が見当たりませんが記載コード足りてますか?
退会済みユーザー

退会済みユーザー

2020/02/26 02:45

大変失礼いたしました、質問文のhtmlを修正いたしました。
guest

回答1

0

ベストアンサー

js

1$('#global-nav ul li a').click(function() { 2 $('#nav-toggle').trigger('click'); 3});

投稿2020/02/26 02:38

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2020/02/26 02:57

kei344さま 迅速なご回答いただきましてありがとうございます。 頂いた記述を追加いたしましたところ、ページ内リンク後に、ハンバーガーメニューがしっかりと元の「三」に戻るという動作が確認できましたが、もう一度、ハンバーガーメニューをクリックすると、配下のメニューが表示されないという状態になってしまいました。 大変お手数をおかけいたしますが、こちらご教示頂けますと幸いでございます。 どうぞよろしくお願いいたします。
kei344

2020/02/26 03:01

それであればメニューの開閉を繰り返すだけで表示できなくなっているはずです。提示されているコードがいずれも不完全なので、問題が再現できません。
退会済みユーザー

退会済みユーザー

2020/02/26 03:35

kei344さま ご教示ありがとうごさいます。 先ほど、頂いたソースコードを記述の上、 自分自身で悩んで書いていた、Jqeryを削除しましたところ、 想定通りに動作させることができました! clickをトリガーに、#nav-toggleを動かしているのに、 #global-navを収束させる記述を書いていてしまったため、 メニューの開閉を繰り返すようなおかしな動作をしていたのではないかと思いました。 kei344さまをベストアンサーとさせていただきたいと思います。 この度はありがとうございました。 またご機会ありましたら、お力をお貸し頂けますと幸いでございます。 ``` $('#global-nav ul li a').click(function() { /* メニューを収束 */ $('#global-nav').slideUp(function() { }); ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問