前提・実現したいこと
レスポンシブの動作確認で、パソコン上でのサイズを変更
↓
スマホのナビゲーション操作
↓
画面サイズをPCに
とすると、PCのナビゲーションが消えてしまう。
更新を押せば元通りになります。
スマホのナビゲーションを操作してもPCの画面に変わると、更新を押すことなくMenu01、Menu02が出るようにしたいです。
JQueryを変更すれば良いのか、CSSが問題なのか分かりません。
HTML
1<header class="is-fixed"> 2 <div class="globalMenu"> 3 <!--ナビゲーション--> 4 <p class="logo"><a href="http://zaitakujob.jp/"><img src="images/logo.png" alt="ロゴ"></a></p> 5 <div class="nav_toggle"> 6 <div> <span></span> <span></span> <span></span> </div> 7 </div> 8 <nav> 9 <ul class="gblnv_block"> 10 <li><a href="/work/payroll.html">Menu01</a></li> 11 <li><a href="#ex">Menu02</a></li> 12 <li><a href="#flow">Menu03</a></li> 13 <li><a href="#faq">Menu04</a></li> 14 </ul> 15 </nav> 16 <p class="register"><a href="#"><img src="images/register.png" width="30px"></a></p> 17 </div> 18 </header> 19
CSS
1 2<code>### CSS 3header { 4 width:100%; 5 margin: 0 auto; 6 overflow:hidden; 7 border-bottom:3px solid #f2f2f2; 8 background-color:#ffffff; 9} 10.is-fixed { 11 position: fixed; 12 top: 0; 13 left: 0; 14 z-index: 2; 15 width: 100%; 16} 17.globalMenu { 18 width:100%; 19 margin:0 auto; 20 overflow:hidden; 21 position:relative; 22} 23.logo { 24 padding-top:10px; 25 width:165px; 26} 27.register { 28 float:left; 29 padding:5px 15px 5px 20px; 30 border:#fe8209 1px solid; 31 margin:5px; 32 position:absolute; 33 top:0; 34 right:60px; 35} 36nav { 37 width:100%; 38 margin:0 auto; 39 float:left; 40 display:none; 41} 42nav ul li { 43 margin:5px; 44 padding:20px 0 20px 0; 45 font-size:18px; 46 text-align:center; 47 border-bottom:1px solid #cccccc; 48} 49nav ul li:first-child { 50 border-top:1px solid #cccccc; 51} 52.nav_toggle { 53 display: block; 54 width: 40px; 55 height: 40px; 56 position: absolute; 57 top: 25px; 58 right:10px; 59 z-index: 100; 60 overflow:hidden; 61} 62.nav_toggle div { 63 position: relative; 64} 65.nav_toggle span { 66 display: block; 67 height: 3px; 68 background: #000; 69 position:absolute; 70 width: 100%; 71 left: 0; 72 -webkit-transition: 0.5s ease-in-out; 73 -moz-transition: 0.5s ease-in-out; 74 transition: 0.5s ease-in-out; 75} 76 .nav_toggle span:nth-child(1) { 77 top:0px; 78} 79 .nav_toggle span:nth-child(2) { 80 top:12px; 81} 82 .nav_toggle span:nth-child(3) { 83 top:24px; 84} 85 86 /*開閉ボタンopen時*/ 87 .open .nav_toggle span:nth-child(1) { 88 top: 12px; 89 -webkit-transform: rotate(135deg); 90 -moz-transform: rotate(135deg); 91 transform: rotate(135deg); 92} 93 .open .nav_toggle span:nth-child(2) { 94 width: 0; 95 left: 50%; 96} 97 .open .nav_toggle span:nth-child(3) { 98 top: 12px; 99 -webkit-transform: rotate(-135deg); 100 -moz-transform: rotate(-135deg); 101 transform: rotate(-135deg); 102} 103@media screen and (min-width:980px) { 104.is-fixed { 105 position: fixed; 106 top: 0; 107 left: 0; 108 z-index: 2; 109 width: 100%; 110} 111.globalMenu { 112 width:980px; 113 margin:0 auto; 114 overflow:hidden; 115} 116.logo { 117 float:left; 118 padding-top:10px; 119} 120.register { 121 float:left; 122 padding:5px 15px 5px 20px; 123 border:#fe8209 1px solid; 124 margin:5px; 125} 126nav { 127 width:720px; 128 margin:0 auto; 129 float:left; 130 display:block; 131} 132nav ul{ 133 width:720px; 134} 135nav ul li { 136 float:left; 137 margin:5px; 138 padding:35px 22px 5px 22px; 139 font-size:18px; 140 border:none; 141} 142nav ul li:first-child { 143 border:none; 144} 145.nav_toggle span { 146display:none; 147} 148} 149
JQuery
1 2$(function(){ 3$('.nav_toggle').click(function(){ 4$("header").toggleClass('open'); 5$("nav").slideToggle(500); 6}); 7$('nav a').on('click', function(){ 8 if (window.innerWidth <= 768) { 9 $('.nav_toggle').click(); 10 } 11 }); 12}); 13
ご教示よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー