###質問したいこと
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}
回答1件
あなたの回答
tips
プレビュー