Q&A
focusを用いてハンバーガーメニューをXにし、メニューが開くようにはできたのですが、Xを押すとハンバーガーメニューに戻り、メニューが閉じるようにするにはどうすればいいのでしょうか？
html
1<a id="nav-toggle" class="nav_slide_button" href="#"> 2 <span></span> 3 </a>
css
1#nav-toggle span, #nav-toggle span::before, #nav-toggle span::after { 2 cursor: pointer; 3 border-radius: 1px; 4 -moz-border-radius: 1px; 5 -webkit-border-radius: 1px; 6 -o-border-radius: 1px; 7 height: 3px; 8 width: 35px; 9 background: #fff; 10 position: absolute; 11 display: block; 12 content: ''; 13 -webkit-transition: all 500ms ease-in-out; 14 transition: all 500ms ease-in-out; 15} 16#nav-toggle span, #nav-toggle span::before, #nav-toggle span::after { 17 cursor: pointer; 18 border-radius: 1px; 19 -moz-border-radius: 1px; 20 -webkit-border-radius: 1px; 21 -o-border-radius: 1px; 22 height: 3px; 23 width: 35px; 24 background: #fff; 25 position: absolute; 26 display: block; 27 content: ''; 28 -webkit-transition: all 500ms ease-in-out; 29 transition: all 500ms ease-in-out; 30} 31 32#nav-toggle:focus span { 33 background-color: transparent; 34} 35 36#nav-toggle:focus span:before { 37 transform: rotate(45deg); 38 -webkit-transform: rotate(45deg); 39 -ms-transform: rotate(45deg); 40} 41 42#nav-toggle:focus span:before{ 43 top: 0; 44} 45 46#nav-toggle:focus span:after { 47 top:0; 48} 49 50#nav-toggle:focus span:after { 51 transform: translateY(-10px) rotate(-45deg); 52 -webkit-transform: translateY(-10px) rotate(-45deg); 53 -ms-transform: translateY(-10px) rotate(-45deg); 54 top: 10px; 55}
Javascript
1$(function() { 2 $('.nav_slide_button').click(function() { 3 $('nav').slideToggle(); 4 }); 5});
回答1件
0
前回の質問で参考サイトを示されていましたが、そのサイトと同様にクラスの有無で状態を管理されてはどうでしょうか？CSSの疑似要素だけで作るのは難しいように思えます。
js
1$(function() { 2 $('.nav_slide_button').click(function() { 3 $(this).toggleClass('active') 4 $('nav').slideToggle(); 5 }); 6});
cssは#nav-toggle:focusを#nav-toggle.activeにするだけです
投稿2019/10/04 04:29
総合スコア768
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。