前提・実現したいこと
ボタンを押すとメニューが全画面に現れようにしています。ボタンは初期状態は3本線とし、開いた時にバツになるようなアニメーションを作りたいです。
発生している問題・エラーメッセージ
開いた時も3本線のままでアニメーションができません。
該当のソースコード
HTML
1<div class="navbar_toggle"> 2 <span class="navbar_toggle_icon"></span> 3 <span class="navbar_toggle_icon"></span> 4 <span class="navbar_toggle_icon"></span> 5 </div>
css
1.navbar_toggle{ 2 z-index:9999; 3 position: absolute; 4 right: 20px; 5 top: 45px; 6 cursor: pointer; 7 } 8 9 .navbar_toggle_icon { 10 position: relative; 11 display: block; 12 height: 2px; 13 width: 30px; 14 background: $black; 15 -webkit-transition: ease .5s; 16 transition: ease .5s; 17 z-index: 1000; 18 } 19 .navbar_toggle_icon:nth-child(1) { 20 top: 0; 21 } 22 23 .navbar_toggle_icon:nth-child(2) { 24 margin: 8px 0; 25 } 26 .navbar_toggle_icon:nth-child(3) { 27 top: 0; 28 } 29 /*OPEN時の動き*/ 30 .navbar_toggle.open .navbar_toggle_icon:nth-child(1) { 31 top: 10px; 32 -webkit-transform: translateY(8px) rotate(45deg); 33 transform: translateY(8px) rotate(45deg); 34 } 35 .navbar_toggle.open .navbar_toggle_icon:nth-child(2) { 36 opacity: 0; 37 } 38 .navbar_toggle.open .navbar_toggle_icon:nth-child(3) { 39 top: -10px; 40 -webkit-transform: translateY(8px) rotate(-45deg); 41 transform: translateY(8px) rotate(-45deg); 42 } 43 44
jQuery
1window.addEventListener('DOMContentLoaded', function(){ 2 $('.navbar_toggle').on('click',function(){ 3 $('.navbar_toggle').toggleClass('open'); 4 $('navbar_toggle_icon').css('background','#fff') 5 $('.nav').fadeToggle(); 6 }); 7 });
試したこと
参考コードコピペしたり何度も確認したのですがわかりませんでした。。
補足情報(FW/ツールのバージョンなど)
環境:Mac
回答1件
あなたの回答
tips
プレビュー