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

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回答

2264閲覧

レスポンシブ切り替えの時の不具合を解決したいです。

oyu

総合スコア48

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クリップ

投稿2019/12/06 06:35

前提・実現したいこと

ハンバーガーメニューをクリックしたら右からスライドする実装なんですが
ウインドウ幅を768pxの切り替えの時に不具合があります。
どのようにすればいいのでしょうか?

イメージ説明

不具合ですが画像の通りでスライドしたグローバルメニューが切り替え時にハンバーガーメニューを
クリックしていないのに出ます。
出ないようにするにはどうすればいいのでしょうか?

該当のソースコード

html

1 </head> 2 <body> 3 <div id="wrapper"> 4 <header> 5 <div class="header-container"> 6 <h1 class="logo"> 7 <a href=""><img src="" alt="">LOGO</a> 8 </h1> 9 <nav class="globalnav"> 10 <ul class="menu"> 11 <li><a href="">Top</a></li> 12 <li><a href="">Menu</a></li> 13 <li><a href="">About</a></li> 14 <li><a href="">Company</a></li> 15 <li><a href="">Contact</a></li> 16 </ul> 17 </nav> 18 <div class="nav-toggle"> 19 <div> 20 <span></span> 21 <span></span> 22 <span></span> 23 </div> 24 </div> 25 <div class="overlay"></div> 26 </div> 27 </header> 28 </div> 29 </body> 30</html>

css

1/* wrapper */ 2#wrapper { 3 height: 100%; 4 overflow: hidden; 5 background-color: red; 6} 7 8/* header */ 9header { 10 11} 12 13header .header-container { 14 max-width: 1340px; 15 width: 95%; 16 margin: 0 auto; 17 display: -webkit-box; 18 display: -webkit-flex; 19 display: -moz-box; 20 display: -ms-flexbox; 21 display: flex; 22 -webkit-box-pack: justify; 23 -webkit-justify-content: space-between; 24 -moz-box-pack: justify; 25 -ms-flex-pack: justify; 26 justify-content: space-between; 27 -webkit-box-align: center; 28 -webkit-align-items: center; 29 -moz-box-align: center; 30 -ms-flex-align: center; 31 align-items: center; 32 padding: 20px; 33} 34 35@media screen and (min-width: 769px) { 36 header .header-container nav.globalnav ul { 37 display: -webkit-box !important; 38 display: -webkit-flex !important; 39 display: -moz-box !important; 40 display: -ms-flexbox !important; 41 display: flex !important; 42 } 43 header .header-container nav.globalnav ul li a { 44 color: #fff; 45 padding-left: 20px; 46 text-decoration: none; 47 } 48} 49 50@media screen and (max-width: 770px) { 51 header .header-container nav.globalnav { 52 width: 250px; 53 height: 100%; 54 background-color: blueviolet; 55 position: fixed; 56 top: 0; 57 right: 0; 58 -webkit-transform: translateX(250px); 59 -moz-transform: translateX(250px); 60 transform: translateX(250px); 61 -webkit-transition: all .5s; 62 -moz-transition: all .5s; 63 transition: all .5s; 64 z-index: 100; 65 } 66 header .header-container nav.globalnav.open { 67 -webkit-transform: translateZ(0); 68 -moz-transform: translateZ(0); 69 transform: translateZ(0); 70 } 71} 72 73@media screen and (min-width: 768px) { 74 header .header-container .nav-toggle { 75 display: none; 76 } 77} 78 79@media screen and (max-width: 768px) { 80 header .header-container .nav-toggle { 81 display: block; 82 position: fixed; 83 top: 30px; 84 right: 15px; 85 width: 40px; 86 height: 40px; 87 z-index: 1000; 88 cursor: pointer; 89 } 90 header .header-container .nav-toggle.active div span:nth-of-type(1) { 91 -webkit-transform: translateY(12px) rotate(135deg); 92 -moz-transform: translateY(12px) rotate(135deg); 93 transform: translateY(12px) rotate(135deg); 94 } 95 header .header-container .nav-toggle.active div span:nth-of-type(2) { 96 opacity: 0; 97 } 98 header .header-container .nav-toggle.active div span:nth-of-type(3) { 99 -webkit-transform: translateY(-12px) rotate(-135deg); 100 -moz-transform: translateY(-12px) rotate(-135deg); 101 transform: translateY(-12px) rotate(-135deg); 102 } 103 header .header-container .nav-toggle div { 104 position: relative; 105 } 106 header .header-container .nav-toggle div span { 107 position: absolute; 108 left: 0; 109 width: 100%; 110 height: 2px; 111 background-color: #fff; 112 -webkit-transition: .3s; 113 -moz-transition: .3s; 114 transition: .3s; 115 } 116 header .header-container .nav-toggle div span:nth-of-type(1) { 117 top: 0; 118 } 119 header .header-container .nav-toggle div span:nth-of-type(2) { 120 top: 12px; 121 } 122 header .header-container .nav-toggle div span:nth-of-type(3) { 123 top: 24px; 124 } 125} 126 127header .header-container .overlay { 128 content: ''; 129 display: block; 130 width: 0; 131 height: 0; 132 background-color: rgba(0, 0, 0, 0.5); 133 position: absolute; 134 top: 0; 135 left: 0; 136 opacity: 1; 137 -webkit-transition: opacity .5s; 138 -moz-transition: opacity .5s; 139 transition: opacity .5s; 140} 141 142header .header-container .overlay.open { 143 width: 100%; 144 height: 100%; 145 opacity: 2; 146}

jQuery

1 $(function(){ 2 $('.nav-toggle').on('click',function(){ 3 if( $(this).hasClass('active') ) { 4 $(this).removeClass('active'); 5 $('nav').removeClass('open'); 6 $('.overlay').removeClass('open'); 7 } else { 8 $(this).addClass('active'); 9 $('nav').addClass('open'); 10 $('.overlay').addClass('open'); 11 } 12 }); 13 $('.overlay').on('click',function(){ 14 if($(this).hasClass('open')) { 15 $(this).removeClass('open'); 16 $('nav').removeClass('open'); 17 $('.overlay').removeClass('open'); 18 } 19 }); 20 });

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

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

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

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

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

guest

回答1

0

ベストアンサー

CSS

1@media screen and (max-width: 768px) { 2header .header-container .nav-toggle { 3display: block; ←ここ

箇所の display: block; があるせいで、769px 以上では display:none; だった.nav-toggleが768px以下になった瞬間に 出現してしまいます。

ここを display:none; にしておくことでクリックした時のみ切り替わるようになると思います。

投稿2019/12/06 07:29

編集2019/12/06 07:31
iss

総合スコア506

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

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

oyu

2019/12/06 09:52

ご回答ありがとうございます。 同じように設定を行ったのですがウインドウ幅を狭めることで少し開閉したアニメーションを出現しないようにしたいのですがどうすればいいでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問