タイトルがわかりづらくなってしまい申し訳ございません。
言葉で表現するよりも実際にコードを見ていただいたほうが分かりやすいと思いますので、お手すきの際にご確認いただけないでしょうか。
Sassでコメントアウトしている「// 以下の処理も上の「.hamburger-icon {}」の中に収めてしまいたいのですが…。」という文章の下部分をなんとか.hamburger-icon{}の中に収めたいのですが…。
よろしくお願いいたします。
html
1<div class="hamburger-icon"> 2 <span class="hamburger-icon__bar"></span> 3 <span class="hamburger-icon__bar"></span> 4 <span class="hamburger-icon__bar"></span> 5</div>
javascript
1$(function(){ 2 $('.hamburger-icon').click(function(){ 3 $(this).toggleClass('active'); 4 }); 5});
scss
1.hamburger-icon { 2 height: 100%; 3 width: 100px; 4 position: relative; 5 display: block; 6 &__bar { 7 height: 2px; 8 width: 50px; 9 margin-left: -25px; // 中央揃え用ネガティブマージン 10 background: $text_color_2; 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 display: block; 15 transition: all 0.3s; 16 &:nth-of-type(1) { 17 transform: translateY(-17px); 18 } 19 &:nth-of-type(2) { 20 transform: translateX(0px); 21 } 22 &:nth-of-type(3) { 23 transform: translateY(17px); 24 } 25 } 26} 27// 以下の処理も上の「.hamburger-icon {}」の中に収めてしまいたいのですが…。 28.hamburger-icon.active { 29 .hamburger-icon__bar { 30 &:nth-of-type(1) { 31 transform: rotate(-45deg) translateY(0px); 32 } 33 &:nth-of-type(2) { 34 transform: translateX(100px); 35 background: rgba(255, 255, 255, 0); 36 } 37 &:nth-of-type(3) { 38 transform: rotate(45deg) translateY(0px); 39 } 40 } 41}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/14 07:01
2019/08/14 07:18
退会済みユーザー
2019/08/14 09:20