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

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

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

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

HTML5

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

Webサイト

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

メニュー

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

jQuery

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

Q&A

解決済

1回答

485閲覧

ハンバーガーメニューで開いたメニューがリンク先で閉じません

CHOUROU

総合スコア11

CSS3

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

HTML5

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

Webサイト

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

メニュー

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

jQuery

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

0グッド

1クリップ

投稿2017/10/03 01:32

編集2017/10/03 01:54

###質問したいこと
http://pilgrim-guild.com/flexbox_humburger-menu/
このサイトを参考にハンバーガーメニューを作ったのですが、メニューからリンク先にとぶとリンク先が開かれたときにメニューが開きっぱなしになってしまうのを改善したいです。
jQueryを使いはじめたばかりなので詳しく教えていただけるとうれしいです。
よろしくお願いします。
###ソースコード

html

1 <header id="header" role="heading"> 2 <nav> 3 <div class="logo"> 4 <a href=""><img src="logo.png"></a> 5 </div> 6 <ul> 7 <li><a href="">MENU</a></li> 8 <li><a href="">PHOTO</a></li> 9 <li><a href="">INFO</a></li> 10 </ul> 11 <div class="nav__icon"> 12 <span></span> 13 <span></span> 14 <span></span> 15 </div> 16 </nav> 17 <!--/Nav--> 18 </header>

jQuery

1jQuery(function(){ 2 jQuery(".nav__icon").on("click", function() { 3 jQuery(this).toggleClass("active"); 4 jQuery("nav ul").slideToggle(); 5 }); 6 7 8 jQuery(window).resize(function(){ 9 var w = $(window).width(); 10 var h = $(window).height(); 11 var x = 768; 12 if (w >= x) { 13 jQuery('nav ul').css({ display: 'flex',height: 'auto' }); 14 }else { 15 jQuery('nav ul').css({ display: 'none',height: h + 'px'}); 16 } 17 }); 18}); 19

css

1@media screen and (min-width:768px){ 2header { 3 background: #FFF; 4 width: 100%; 5 margin:0 auto; 6} 7.logo img{ 8 width:170px; 9} 10.logo img:hover{ 11 opacity:0.5; 12} 13header ul a { 14 background: transparent; 15 margin: 0; 16 padding: 0; 17 font-size: 120%; 18 vertical-align: baseline; 19 text-decoration: none; 20 font-family: 'Cantata One', serif; 21} 22 23nav { 24 max-width: 970px; 25 width:80%; 26 height: 75px; 27 margin: 0px auto; 28 display: -webkit-flex; 29 display: flex; 30 -ms-align-items: center; 31 align-items: center; 32 position:relative; 33} 34 35header ul { 36 display: -webkit-flex; 37 display: flex; 38 list-style: none; 39 height:auto; 40 position:absolute; 41 right:0px; 42} 43 44header ul li a { 45 margin: 0px 10px; 46 padding: 10px; 47 border-radius: 5px; 48 color:#182d0e; 49} 50header ul li :hover{ 51 opacity:0.5; 52} 53.nav__icon, 54.nav__icon span { 55 display: none; 56 57} 58 59.nav__icon { 60 width: 36px; 61 height: 28px; 62 margin-right: 10px; 63 position: relative; 64 cursor: pointer; 65} 66 67.nav__icon span { 68 background: black; 69 position: absolute; 70 left: 0; 71 width: 100%; 72 height: 4px; 73 border-radius: 4px; 74 75} 76 77.nav__icon span:nth-of-type(1) { 78 top: 0; 79} 80 81.nav__icon span:nth-of-type(2) { 82 top: 12px; 83} 84 85.nav__icon span:nth-of-type(3) { 86 bottom: 0; 87} 88 89.nav__icon.active span:nth-of-type(1) { 90 -webkit-transform: translateY(12px) rotate(-45deg); 91 transform: translateY(12px) rotate(-45deg); 92} 93 94.nav__icon.active span:nth-of-type(2) { 95 display: none; 96} 97 98.nav__icon.active span:nth-of-type(3) { 99 -webkit-transform: translateY(-12px) rotate(45deg); 100 transform: translateY(-12px) rotate(45deg); 101} 102} 103 104@media screen and (max-width:767px){ 105 header { 106 position: relative; 107 z-index: 999; 108 } 109 header h1 { 110 margin: 0 auto; 111 } 112 header ul { 113 -webkit-flex-direction: column; 114 flex-direction: column; 115 -webkit-justify-content: center; 116 justify-content: center; 117 background: white; 118 position: absolute; 119 top: 80px; 120 left: 0px; 121 width: 100%; 122 z-index: 980; 123 } 124 header ul li { 125 padding: 10px; 126 text-align: center; 127 } 128 header ul li a { 129 display: block; 130 background: transparent; 131 margin: 0px; 132 padding: 20px; 133 } 134 header ul li a:hover { 135 color: #000; 136 background: #fff; 137 } 138 .nav__icon, 139 .nav__icon span { 140 display: inline-block; 141 transition: all .4s; 142 box-sizing: border-box; 143 z-index: 999; 144 position:absolute; 145 right:0; 146 } 147} 148}

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

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

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

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

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

m.ts10806

2017/10/03 01:47

flexboxで作るような記事ですが、現在組まれているcssも提示いただけますか?
m.ts10806

2017/10/03 01:54

何度も修正依頼をしてすみませんが、css部分がコードブロックで囲えていないようなので修正お願いします。投稿編集画面にはリアルタイムで文章のプレビュー確認ができるので、うまくいっているかどうか確認しながら調整してください。
CHOUROU

2017/10/03 01:55

度々申し訳ございません、修正できました。
guest

回答1

0

ベストアンサー

現在は「resize」時のみがトリガーとなって切り替えが行われているので、
「load」時も同じように切り替えるようにすると良いです。
onを使って複数イベントを登録してみてください。

javascript

1jQuery(window).on("resize load",function(){ 2

または、

javascript

1window.onresize = flexchange; 2window.onload = flexchange; 3 4function flexchange(){ 5 var w = $(window).width(); 6 var h = $(window).height(); 7 var x = 768; 8 if (w >= x) { 9 jQuery('nav ul').css({ display: 'flex',height: 'auto' }); 10 }else { 11 jQuery('nav ul').css({ display: 'none',height: h + 'px'}); 12 } 13} 14 15

投稿2017/10/03 02:09

m.ts10806

総合スコア80765

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

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

CHOUROU

2017/10/03 02:20

mts10806さま、解決しました。詳しくわかりやすく教えてくださり、とても感謝しています。ありがとうございました。
m.ts10806

2017/10/03 02:22

解決したようでなによりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問