タイトルの通り、ナビゲーションメニューがかかりません。
かからない部分は.nav.nav-openの記述のとこだけです。ハンバーガーメニューのところなどはtransitionが効いています。
一応流れとして、
1 .nav部分全体をdisplay:noneとしておく。
2 ハンバーガーメニューである.btnをクリックするとtoggleClassによって.nav-openがつく。
3 .nav.nav-openにtransitionの指定。
このように考えています。
jQueryの方の指定でもdurationやメソッドチェーンとしてshow,slowなど試してはいるのですがこちらもイマイチうまくいきません。
また、今現在、関係ないところにも試しでtransitionをかけており、散らかっている状態です。
申し訳ありませんが、自己解決できそうにないので教えていただけると助かります。
よろしくお願い致します。
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width"> 7 <title>humberger menu2</title> 8 <link rel="stylesheet" href="css/style.css"> 9 <link rel="stylesheet" href="css/reset.css"> 10 <link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet"> 11 12</head> 13<body> 14<div id="container"> 15<header id="gnav"> 16 <h1>Grid</h1> 17 <p class="btn"><span></span><span></span><span></span></p> 18</header> 19 20 <nav class="nav"> 21 <ul class="navG navG01"> 22 <li><a href="#">menu01</a></li> 23 <li><a href="#">menu02</a></li> 24 <li><a href="#">menu03</a></li> 25 <li><a href="#">menu04</a></li> 26 <li><a href="#">menu05</a></li> 27 </ul> 28 29 <ul class="navG navG02"> 30 <li><a href="#">menu01</a></li> 31 <li><a href="#">menu02</a></li> 32 <li><a href="#">menu03</a></li> 33 <li><a href="#">menu04</a></li> 34 <li><a href="#">menu05</a></li> 35 </ul> 36 </nav> 37 <!--/.nav--> 38 39 40<div class="main"> 41<article class="main-pic"> 42<a href="#"> 43 <figure><img src="https://placehold.jp/200x124.png" alt=""></figure> 44</a> 45</article> 46<!-- /.main --> 47</div> 48<!-- /.main --> 49 50</div> 51<!-- /#container --> 52 53<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 54 55<script> 56 57$(function() { 58 $(".btn").on("click", function(){ 59 $("ul").toggleClass("show"); 60 $(".btn").toggleClass("acc_open"); 61 $(".body-hum").toggleClass("body-bg"); 62 $(".nav").toggleClass("nav-open"); 63 return false; 64}); 65}); 66</script> 67</body> 68</html> 69
css
1@charset "utf-8"; 2 3/*reset*/ 4 5body { 6 font-size: 62.5%; 7 font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; 8} 9 10* { 11 margin: 0; 12 padding: 0; 13 list-style: none; 14 -webkit-box-sizing: border-box; 15 -moz-box-sizing: border-box; 16 box-sizing: border-box; 17} 18 19 20/*font-size*/ 21 22html { 23 font-size: 62.5%; 24} 25 26 27/* =10px */ 28 29body { 30 font-size: 16px; 31 font-size: 1.6rem; 32} 33 34 35/* =16px */ 36 37h1 { 38 font-size: 32px; 39 font-size: 3.2rem; 40} 41 42h2 { 43 font-size: 24px; 44 font-size: 2.4rem; 45} 46 47h3 { 48 font-size: 20px; 49 font-size: 2.0rem; 50} 51 52h4 { 53 font-size: 18px; 54 font-size: 1.8rem; 55} 56 57p, ul, ol, li, a, dl, dt, dd { 58 font-size: 16px; 59 font-size: 1.6rem; 60} 61 62a { 63 text-decoration: none; 64} 65 66 67/*コンテンツ 68---------------------------------------*/ 69 70#container { 71 overflow: hidden; 72 width: 90%; 73 margin: 0 auto; 74} 75 76#gnav { 77 background: lightgreen; 78} 79 80#gnav::after { 81 display: block; 82 clear: both; 83 content: ''; 84} 85 86h1 { 87 width: 85%; 88 float: left; 89 min-height: 45px; 90 line-height: 45px; 91 font-size: 2.4rem; 92 font-family: 'Rubik Mono One', sans-serif; 93} 94 95p.btn { 96 width: 15%; 97 float: right; 98 min-height: 45px; 99 max-width: 50px; 100 position: relative; 101} 102 103p.btn:before { 104 content: 'Menu'; 105 position: absolute; 106 top: 14px; 107 right: 45px; 108 font-size: 15px; 109 font-size: 1.5rem; 110 line-height: 1.1; 111 font-weight: bold; 112 z-index: 2; 113} 114 115.nav { 116 display: none; 117 width: 100%; 118 transition: 0.5s; 119 position: absolute; 120 top: 45px; 121 left: 0; 122 -webkit-transition: .3s; 123 -o-transition: .3s; 124 transition: 1s; 125} 126 127.nav.nav-open { 128 display: block; 129 -webkit-transition: all 0.5s ease-out; 130 -moz-transition: all 0.5s ease-out; 131 -ms-transition: all 0.5s ease-out; 132 -o-transition: all 0.5s ease-out; 133 transition: all 0.5s ease-out; 134} 135 136.navG.show { 137 margin-left: 0; 138} 139 140ul.navG::after { 141 display: block; 142 content: ''; 143 clear: both; 144} 145 146ul.navG { 147 width: 100%; 148} 149 150ul.navG02 { 151 margin-top: 30px; 152} 153 154ul.navG li { 155 height: 40px; 156 text-align: center; 157 background: rgba(0, 0, 0, .3); 158 border-bottom: 1px solid #fff; 159} 160 161ul.navG li:last-child { 162 border-bottom: none; 163} 164 165ul.navG li a { 166 display: block; 167 line-height: 40px; 168 color: #fff; 169 font-size: 15px; 170} 171 172p span { 173 background: #fff; 174 display: block; 175 width: 60%; 176 height: 3px; 177 max-width: 30px; 178 position: absolute; 179 top: 0; 180 left: 0; 181 right: 0; 182 bottom: 0; 183 margin: 0 auto; 184 -webkit-transition: all 0.5s ease-out; 185 -moz-transition: all 0.5s ease-out; 186 -ms-transition: all 0.5s ease-out; 187 -o-transition: all 0.5s ease-out; 188 transition: all 0.5s ease-out; 189} 190 191p>span:first-child { 192 top: 26%; 193} 194 195p>span:nth-child(2) { 196 top: 45%; 197} 198 199p>span:nth-child(3) { 200 top: 62%; 201} 202 203.acc_open>span:nth-child(2) { 204 opacity: 0; 205} 206 207.acc_open>span:first-child { 208 top: 45%; 209 -webkit-transform: rotate(225deg); 210 -moz-transform: rotate(225deg); 211 -ms-transform: rotate(225deg); 212 -o-transform: rotate(225deg); 213 transform: rotate(225deg); 214} 215 216.acc_open>span:nth-child(3) { 217 top: 45%; 218 -webkit-transform: rotate(-225deg); 219 -moz-transform: rotate(-225deg); 220 -ms-transform: rotate(-225deg); 221 -o-transform: rotate(-225deg); 222 transform: rotate(-225deg); 223} 224
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/21 09:02