Q&A
前提・実現したいこと
ハンバーガーメニューをクリックしたら右からスライドする実装なんですが
ウインドウ幅を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 });
回答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
総合スコア506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/06 09:52