スマホ用のメニューボタンを押してメニューを開閉する度にボタンの表示が
- “=” : メニューが閉じているとき(= 開くボタン)
- “x” : メニューが開いているとき(= 閉じるボタン)
のように切り替わる。
MEMO
上記サンプルはボタンの動作のみなので、メニューは開閉しない(メニューは作成していない)。
参考にしたサイトは以下の通り。
文具女子博
※スマホ用のメニューボタン
ソースコード
HTML
|
1 2 3 4 5 6 |
<button type="button" class="menu-button menu-closed"> <div class="bar bar-01"></div> <div class="bar bar-02"></div> </button> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.menu-button { width: 60px; height: 60px; background-color: #393D46; border-radius: 50%; border: none; /* <button>の影を消す */ } .menu-button .bar { /* 横線を引く */ width: 40px; height: 2px; border-top: 2px solid #fff; margin: 0 auto; transform-origin: 50%; /* 回転の基準点はバーの中心 */ transition: 0.25s; } /* クリックされたらバーをボタンの中心に移動させた上で 45度回転させて「x」印にする */ .menu-closed .bar-01 { margin-bottom: 10px; } .menu-closed .bar-02 { margin-top: 10px; } .menu-opened .bar-01 { margin-bottom: 0; transform: rotate(-45deg); } .menu-opened .bar-02 { margin-top: 0; transform: rotate(45deg); } |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$(function(){ $('.menu-button').click(function() { var opened = 'menu-opened'; var closed = 'menu-closed'; if($(this).hasClass(opened)) { // メニューが開いているとき //メニューを閉じる処理 // ... //ボタンの表示を変更 "x" -> "=" $(this).addClass(closed); $(this).removeClass(opened); } else if($(this).hasClass(closed)) { // メニューが閉じているとき //メニューを開く処理 // ... //ボタンの表示を変更 "=" -> "x" $(this).addClass(opened); $(this).removeClass(closed); } }); }); |
コメントを残す