CSSを使ったハンバーガー(三本線)とバツ(×)ボタンを、簡単に切り替える方法をご紹介します。
toggleClassを使ってclassを追加・削除するだけです。
スマホサイトのメニューボタン等に使えます。
Contents
ディスプレイ広告
ハンバーガー(三本線)とバツ(×)ボタンのCSS記述
※ハンバーガー(.menu、.menu span)とバツボタン(.close、.close span)のCSS記述です。サイズ・色等は必要に応じて書き換えてください。
<style type="text/css"> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; overflow-x: hidden; line-height: 1.8em; } h1{ font-size:18px; line-height:1.6em; text-align:center; font-weight:normal; padding:10px 0; } .menu{ width: 50px; height: 50px; cursor: pointer; margin: 0 auto; position: relative; } .menu span{ display: block; margin: 0; border: none; width: 50%; height: 3px; background: #000; transform-origin:0% 50%; position: absolute; top: 12px; left: 25%; transition: .3s; } .menu span:nth-of-type(2){ top: 21px; } .menu span:nth-of-type(3){ top: 30px; } .close span{ left: 30%; } .close span:nth-of-type(1){ transform: rotate(45deg); width: 52%; } .close span:nth-of-type(2){ opacity: 0; } .close span:nth-of-type(3){ top: 30px; transform: rotate(-45deg); width: 52%; } </style>
メニューボタンのHTML記述例
※class=”menu”タグ要素内にspanタグを3つ用意します。
<div class="menu"> <span></span> <span></span> <span></span> </div>
メニュークリック時のJavaScritp記述
※jquery-2.2.0.min.jsファイルを読み込みます。toggleClassでclassにcloseを追加・削除してます。必要に応じて書き換えてください。
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".menu").click(function() { $(this).toggleClass("close"); }); }); </script>
CSSでハンバーガー(三本線)をバツ(×)に切り替えるメニューボタンデモページ
CSSでハンバーガー(三本線)をバツ(×)に切り替えるメニューボタンデモ
※流用される場合は自己責任でお願いします。