web制作を勉強中の者です。よろしくお願いいたします。
現在ポートフォリオを作成しており、レスポンシブ対応をしているところなのですが、ヘッダーのハンバーガーメニューで詰まっています。
下記Codeのjs内で、".openbtn"の"this"のみ指定する内容で完結するときちんと動くのですが、それ以上にコードを記載("#g-nav"や".circle-bg"など)すると、アニメーションが全く動かなくなりました。
"#g-nav"や".circle-bg"の箇所や、入子関係がおかしいのかもしれないと思っているのですが、原因を探して見ても全く解決できそうになく、こちらで質問させていただくことにいたしました。
何かヒントだけでもいただけないでしょうか。
お忙しい中恐縮ですが、よろしくお願いいたします。
(「動くwebデザインアイデア帳」という書籍を参考にコードを書きました。)
Code
https://github.com/kobato-bocchi/portfolio...git
GitHub page
https://kobato-bocchi.github.io/portfolio../
html
1 <header class="header"> 2 <div class="header__bg"> 3 <div class="header__contents"> 4 <div class="header__logo"> 5 <a href=""><img src="./img/logo.png" alt=""></a> 6 </div> 7 <nav id="g-nav"> 8 <div class="openbtn"> 9 <span></span> 10 <span></span> 11 <span></span> 12 </div> 13 <div class="circle-bg"></div> 14 <div id="g-nav-list"> 15 <ul> 16 <li><a href="#">home</a></li> 17 <li><a href="#works">works</a></li> 18 <li><a href="#skill">skill</a></li> 19 <li><a href="#services">services</a></li> 20 <li><a href="#contact">contact</a></li> 21 </ul> 22 </div> 23 </nav> 24 </div> 25 </div> 26 </header>
js
1$(".openbtn").click(function () { 2 $(this).toggleClass('active'); 3 $("#g-nav").toggleClass('panelactive'); 4 $(".circle-bg")toggleClass('circleactive'); 5}); 6$("#g-nav a").click(function () { 7 $(".openbtn").removeClass('active'); 8 $("#g-nav").removeClass('panelactive'); 9 $(".circle-bg").removeClass('circleactive'); 10});
scss
1/* ================================ 2header 3================================ */ 4.header { 5 height: 100px; 6 position: fixed;//スクロールしてもついてくる 7 width: 100%; 8 box-shadow: 0 3px 3px rgba( #000, 0.16); 9 z-index: 100; 10 top: 0; 11 left: 0; 12 13 @include mq('tab') { 14 height: 70px; 15 } 16 17 @include mq('sp') { 18 height: 60px; 19 } 20} 21.header__bg { 22 background: url(../img/hiroyoshi-urushima-D2dyWf0NImU-unsplash.jpg) no-repeat center center / cover; 23 display: flex; 24 justify-content: space-around; 25 height: inherit; 26} 27.header__contents { 28 width: 85%; 29 display: flex; 30 justify-content: space-between; 31 align-items: center; 32 33 @include mq('sp') { 34 width: 100%; 35 } 36} 37.header__logo { 38 // padding-left: 100px; 39 40 @include mq('sp') { 41 padding-left: 30px; 42 } 43 44 a { 45 46 } 47 img { 48 width: 50%; 49 padding-top: 12px; 50 } 51 52} 53#g-nav { 54 padding-right: 30px; 55 56 @include mq('sp') { 57 position: absolute; 58 right: 0; 59 60 ul { 61 opacity: 0; 62 position: absolute; 63 z-index: 999; 64 top: 50%; 65 left: 50%; 66 transform: translate(-50%, -50%); 67 } 68 } 69} 70#g-nav.panelactive { 71 @include mq('sp') { 72 73 position: fixed; 74 z-index: 999; 75 top: 0; 76 width: 100%; 77 height: 100vh; 78 79 #g-nav-list { 80 display: block; 81 } 82 83 ul { 84 opacity: 1; 85 86 li { 87 animation-name: gnaviAnime; 88 animation-duration: 1s; 89 animation-delay: .2s; 90 animation-fill-mode: forwards; 91 opacity: 0; 92 } 93 } 94 } 95} 96#g-nav-list { 97 ul { 98 display: flex; 99 // padding-right: 100px; 100 align-items: center; 101 margin-left: auto; 102 103 li { 104 &:not(:first-child) { 105 margin-left: 40px; 106 } 107 108 a { 109 color: #fff; 110 text-decoration: none; 111 font-weight: 700; 112 // position: relative; 113 } 114 } 115 } 116 117 @include mq('sp') { 118 display: none; 119 position: fixed; 120 z-index: 999; 121 width: 100%; 122 height: 100vh; 123 overflow: auto; 124 -webkit-overflow-scrolling: touch; 125 } 126} 127@include mq('sp') { 128 @keyframes gnaviAnime { 129 0% { 130 opacity: 0; 131 } 132 100% { 133 opacity: 1; 134 } 135 } 136} 137.circle-bg { 138 @include mq('sp') { 139 position: fixed; 140 z-index: 3; 141 // 丸の形 142 width: 100px; 143 height: 100px; 144 border-radius: 50%; 145 background: #999; 146 // 丸のスタート位置と形状 147 // scaleを始めは0に 148 transform: scale(0); 149 right: -50px; 150 top: -50px; 151 // 0.6秒かけてアニメーション 152 transition: all .6s; 153 } 154} 155.circle-bg.circleactive { 156 @include mq('sp') { 157 transform: scale(50); 158 } 159} 160nav { 161 @include mq('sp') { 162 ul { 163 list-style: none; 164 text-align: center; 165 } 166 li, 167 a { 168 display: inline-block; 169 text-decoration: none; 170 color: #000; 171 padding: 10px; 172 } 173 } 174} 175// ハンバーガーメニューボタンーーーーーーーーーーーーーーー 176// ボタン外側 177@include mq('sp') { 178 .openbtn { 179 position: relative; 180 // position: fixed; 181 background: #d54884; 182 cursor: pointer; 183 width: 50px; 184 height: 50px; 185 border-radius: 5px; 186 187 // ボタン内側 188 span { 189 display: inline-block; 190 transition: all .4s; //アニメーションの設定 191 position: absolute; 192 left: 14px; 193 height: 2px; 194 border-radius: 5px; 195 background: #fff; 196 width: 45%; 197 198 &:nth-of-type(1) { 199 top: 13px; 200 } 201 &:nth-of-type(2) { 202 top: 19px; 203 } 204 &:nth-of-type(3) { 205 top: 25px; 206 207 &::after { //3つ目の要素のafterにMENU表示を指定 208 content: "Menu"; 209 position: absolute; 210 top: 5px; 211 left: -2px; 212 color: #fff; 213 font-size: 0.6rem; 214 text-transform: uppercase; 215 } 216 } 217 } 218 } 219 .openbtn.active { 220 span { 221 &:nth-of-type(1) { 222 top: 14px; 223 left: 18px; 224 transform: translateY(6px) rotate(-45deg); 225 width: 30%; 226 } 227 &:nth-of-type(2) { 228 opacity: 0; 229 } 230 &:nth-of-type(3) { 231 top: 26px; 232 left: 18px; 233 transform: translateY(-6px) rotate(45deg); 234 width: 30%; 235 236 &::after { 237 content: "Close"; 238 transform: translateY(0) rotate(-45deg); 239 top: 5px; 240 left: 4px; 241 } 242 } 243 } 244 } 245} 246// ーーーーーーーーーーーーーーーーーーーーーーーーー
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/31 12:12