Q&A
transform: rotate(45deg); だけが効かないのですか？
top:0;は効いているのでしょうか。
試しに、開発者ツールで他のスタイルを指定したらどうなりますか？
動きがないという意味だったら、transition:all .3s （任意の数値に変更）が足りないのかなと思います。
初学者です。ハンバーガーメニューを作っています。
html
1<nav class="nav"> 2 <ul class="nav-list"> 3 <li class="nav-list__item"> 4 <a href="#">home</a> 5 </li> 6 <li class="nav-list__item"> 7 <a href="#">works</a> 8 </li> 9 <li class="nav-list__item"> 10 <a href="#">service</a> 11 </li> 12 <li class="nav-list__item"> 13 <a href="#">contact</a> 14 </li> 15 <li class="nav-list__item"> 16 <a href="#">blog</a> 17 </li> 18 </ul> 19 <button 20 class="hamburger js-hamburger" 21 aria-controls="global-nav" 22 aria-expanded="false" 23 > 24 <span class="bar"> 25 <span class="screen-reader-text">メニューを開閉する</span> 26 </span> 27 </button> 28 </nav>
sass
1.nav { 2 background-color: #fff; 3 width: 240px; 4 height: 350px; 5 top: 0; 6 left: -240px; 7 position: fixed; 8 top: 60vh; 9 box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); 10 .nav-list { 11 margin: 0; 12 padding: 0; 13 top: 50px; 14 left: 50%; 15 transform: translateX(-10%); 16 position: absolute; 17 .nav-list__item { 18 margin: 0; 19 list-style: none; 20 a { 21 display: block; 22 text-decoration: none; 23 color: #000; 24 padding: 10px; 25 text-align: center; 26 } 27 } 28 } 29 .hamburger { 30 box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); 31 background-color: #fff; 32 display: block; 33 position: absolute; 34 top: 150px; 35 left: 240px; 36 width: 52px; 37 height: 52px; 38 margin: 0; 39 padding: 0; 40 border: none; 41 position: absolute; 42 .bar { 43 display: block; 44 background-color: #000; 45 width: 24px; 46 height: 1px; 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 transform: translateX(-50%); 51 &::before, 52 &::after { 53 content: ""; 54 width: 100%; 55 height: 100%; 56 position: absolute; 57 background-color: #000; 58 } 59 &::before { 60 top: 6px; 61 left: 0; 62 63 } 64 &::after { 65 top: -6px; 66 left: 0; 67 } 68 } 69 } 70}
js
1$(function() { 2 // 3 var duration = 300; 4 5 // aside ---------------------------------------- 6 var $nav = $(".nav"); 7 var $asidButton = $nav.find(".js-hamburger").on("click", function() { 8 $nav.toggleClass("open"); 9 if ($nav.hasClass("open")) { 10 $nav.stop(true).animate({ left: "-70px" }, duration, "easeOutBack"); 11 } else { 12 $nav.stop(true).animate({ left: "-240px" }, duration, "easeInBack"); 13 } 14 }); 15}); 16
jsでnavにopenというclassは追加されますが、//の部分が効かないです。
sass
1.nav.open .hamburger .bar { 2 background-color: transparent; 3} 4.nav.open .hamburger .bar::before { 5 top: 0; 6 transform: rotate(45deg); 7} 8.nav.open .hamburger .bar::after { 9 top: 0; 10 transform: rotate(-45deg); 11}
を追加したいです。
.open &
で追加したところという意味です。
間違えているところを消さないでください……。
編集履歴から初版を拾うことができるにはできるんですが、
今の状態ではパッと見「投げっぱなし」の質問と思われてしまいます。
あらら……
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
回答2件
0
ベストアンサー
何らかのクラスのあとにスペース+アンパサンドをつけると今までたどってきた要素の一番上に親要素をつけるため、
現在記述している.open &では.open .nav .hamburger .bar::afterという感じになってしまいます。
.navの上に.openとクラスのついた親要素がないと起動しないようになってますね。
.navに.openがついている前提での記述をしたい場合、.nav直下に記述するのが丸そうです。
Sass
1.nav { 2 background-color: #fff; 3 width: 240px; 4 height: 350px; 5 top: 0; 6 left: -240px; 7 position: fixed; 8 top: 60vh; 9 box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); 10 11 .nav-list { 12 margin: 0; 13 padding: 0; 14 top: 50px; 15 left: 50%; 16 transform: translateX(-10%); 17 position: absolute; 18 19 .nav-list__item { 20 margin: 0; 21 list-style: none; 22 23 a { 24 display: block; 25 text-decoration: none; 26 color: #000; 27 padding: 10px; 28 text-align: center; 29 } 30 } 31 } 32 33 .hamburger { 34 box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5); 35 background-color: #fff; 36 display: block; 37 position: absolute; 38 top: 150px; 39 left: 240px; 40 width: 52px; 41 height: 52px; 42 margin: 0; 43 padding: 0; 44 border: none; 45 position: absolute; 46 47 .bar { 48 display: block; 49 background-color: #000; 50 width: 24px; 51 height: 1px; 52 position: absolute; 53 top: 50%; 54 left: 50%; 55 transform: translateX(-50%); 56 57 /*.open & { 58 background-color: transparent; //効かない 59 }*/ 60 61 &::before, 62 &::after { 63 content: ""; 64 width: 100%; 65 height: 100%; 66 position: absolute; 67 background-color: #000; 68 } 69 70 &::before { 71 top: 6px; 72 left: 0; 73 74 /*.open & { 75 top: 0; 76 transform: rotate(45deg); //効かない 77 }*/ 78 } 79 80 &::after { 81 top: -6px; 82 left: 0; 83 84 /*.open & { 85 top: 0; 86 transform: rotate(45deg); //効かない 87 }*/ 88 } 89 } 90 } 91 &.open { 92 .hamburger .bar { 93 background-color: transparent; 94 &::before { 95 top: 0; 96 transform: rotate(45deg); //効かない 97 } 98 &::after { 99 top: 0; 100 transform: rotate(-45deg); //効かない 101 } 102 } 103 } 104}
投稿2020/03/25 08:30
編集2020/03/25 08:39総合スコア354
0
追記拝読いたしました。
今の書き方では正しくCSSに出力されていないのかなと思います。
なので、
sass
1.bar { 2 display: block; 3 background-color: #000; 4 width: 24px; 5 height: 1px; 6 position: absolute; 7 top: 50%; 8 left: 50%; 9 transform: translateX(-50%); 10 &.open{ 11 background-color: transparent; 12 &:after{ 13 top: 0; 14 transform: rotate(45deg); 15 } 16}
としてみたらどうなるでしょう。私も初心者なので間違っていたらすみません。
出力されたCSSを確認しながら書き直すのが良いかと思います。
投稿2020/03/25 07:47
総合スコア53
そのように記載しましたが、まだ効かないみたいです。
出力されたCSSはどのようになっていますか？
該当部分を見直すと親子関係が崩れたりしているかもしれないです。
ちなみにopenはbarではなく、navに追加されます。
sassコードの方を修正されたのでしょうか。
.open〜の記述がないので、私より知識のある方が見てもこの状態ではアドバイスをいただけないかと…
sassがどのように出力されているのか分からないのですが
}
}
}
&.open{
.hamburger {〜〜
と続ける必要があるように思えます。
質問にjsでnavにopenを追加すると記載はしてありますのでそれでわかる方はわかると思います。
あなたの回答
tips
プレビュー
