前回やった「jQueryのclickイベントを使ってtransformを適用させる」を応用し、ボタン自体にアニメーションを追加させてみましょう。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('.btn').on('click', function() { $('#menu').slideToggle(200); $('.btn-icon').toggleClass('close'); return false; }); }); </script> <style> html, body, h1, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; color: #FFF; } #header { height: 300px; background: #049DCD; text-align: center; padding-top: 20px; } h1 { text-align: center; font-size: 24px; margin-bottom: 20px; color: #FFF; } /* 線の描画 */ .btn { width:200px; height: 200px; margin: 0 auto 80px; border-radius: 20px; background: #fff; position: relative; } .btn a { display: block; width: 200px; height: 200px; } .btn-icon { display: block; width: 100px; height: 4px; background: #049DCD; position: absolute; top: 0; right: 0; bottom:0; left: 0; margin: auto; transition: 0.2s; } .btn-icon:after { display: block; content: ""; width: 100px; height: 4px; position: absolute; top: 0; right: 0; bottom:0; left: 0; margin: auto; background: #049DCD; transform: rotate(90deg); transition: 0.5s; } .btn-icon.close { background: transparent; } .btn-icon.close:after { transform: rotate(0); } /*スライドで出てくるメニュー*/ #menu { background: #333; width: 100%; height: 200px; } ul li { height: 50px; border-bottom: 1px solid #FFF; box-sizing: border-box; } ul li:last-child { border-bottom: none; } ul li a { line-height: 50px; font-size: 18px; } </style> </head> <body> <div id="header"> <h1>線を動かす</h1> <div class="btn"> <a href="#"> <span class="btn-icon"></span> </a></div> <div id="menu"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">枝豆一覧</a></li> <li><a href="#">枝豆隊</a></li> <li><a href="#">アクセス</a></li> </ul> </div> </div> </body> </html>