参考:3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる
HTML
<a href="#" id="panel-btn"><span id="panel-btn-icon"></span></a>
CSS
#panel-btn{ display: inline-block; position: relative; width: 40px; height: 40px; margin: 20px 0 10px; border-radius: 50%; background: #fff; } #panel-btn:hover{ background: #fafafa; } #panel-btn-icon{ display: block; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: #2196F3; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after{ display: block; content: ""; position: absolute; top: 50%; left: 0; width: 14px; height: 2px; background: #2196F3; transition: .3s; } #panel-btn-icon:before{ margin-top: -6px; } #panel-btn-icon:after{ margin-top: 4px; } #panel-btn .close{ background: transparent; } #panel-btn .close:before, #panel-btn .close:after{ margin-top: 0; } #panel-btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } #panel-btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } //閉じる #panel-btn .close{ background: transparent; } #panel-btn .close:before, #panel-btn .close:after{ margin-top: 0; } #panel-btn .close:before{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } #panel-btn .close:after{ transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
JS
$(function() { $("#panel-btn").click(function() { $("#panel").slideToggle(200); $("#panel-btn-icon").toggleClass("close"); return false; }); });
ちょっと直したところ
Bootstrapを使っていると、 .close
でバッティングするのでクラス名は変更する必要があります。
また、return false;
があると動かないので、それもコメントアウトしました。