CSSで作るトグルボタン
今回は、CSSで実装してみましょう。さらにクリック後、trantitonを用いて、クローズボタンに変化させます。まず、”toggle”エリアをつくり、spanを三つ記述します。このspanタグにボーダーブロパティを実装することで、三本ラインを描写することができます。
|
1 2 3 4 5 6 |
<!-- HTMLの記述 ハンバーガーメニュー部分 --> <div class="toggle"> <span></span> <span></span> <span></span> </div> |
このままだと、何も出ません。ボーダーを利用して、三本ラインを描写してみましょう。
:nth-child
疑似クラス
兄弟要素のグループの中での位置に基づいて指定することが可能になります。例えば、:nth-child(3)と記述すると、それは3番目の要素を指していることになります。整列する出番の多いリストタグなどに使うと便利な擬似クラスです。
もうお分かりでしょうか？1番目、2番目、3番目のspanを、それぞれ少しずつずらすことで、三本ラインになるのです。※:nth-child擬似クラスは、様々な順番を指定することができる万能タグです。他にも、奇数や偶数だけを選別したり多彩な指定方法も用意されています。https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
|
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 46 47 48 49 50 |
/*トグルボタンのスタイルを指定*/ .toggle { display: block; width: 50px; height: 50px; cursor: pointer;/*カーソルが乗ったらポインターに変化させる*/ } .toggle span { display: block; position: absolute; width: 50px; border-bottom: solid 3px #333;/*ボーダーで実装*/ -webkit-transition: 0.2s ease;/*変化の速度を指定*/ -moz-transition: 0.2s ease; /*変化の速度を指定*/ transition: 0.2s ease; /*変化の速度を指定*/ } /*三本ラインを少しずつずらしていきます。*/ .toggle span:nth-child(1) { top:5px; } .toggle span:nth-child(2) { top: 18px; } .toggle span:nth-child(3) { top: 32px; } /*----------クリックしたら、(.active)にパスし、 斜めに変形させ×(クローズ)にする ------------------------*/ /* 最初のspanをマイナス45度に */ .toggle.active span:nth-child(1) { top: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); } /* 2番目と3番目のspanを45度に */ .toggle.active span:nth-child(2), .toggle.active span:nth-child(3) { top: 18px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } |
下記のスクリプトを用いて、クリック後の動作を(‘active‘)へパスさせます。
|
1 2 3 4 5 6 7 8 9 10 |
/*--------------CDNを先に記述する--------------*/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { $('.toggle').click(function() { $(this).toggleClass('active'); }); }); </script> |
See the Pen
Toggle_menu by nakatax (@cocohp)
on CodePen.
▶ボタンができたら、レスポンシブメニューを実装してみよう。
すごいぞ！豊富なトグルエフェクト
簡単な記述で実現できるTasty CSS-animated hamburgersをご紹介します。
■ Tasty CSS-animated hamburgers
https://jonsuh.com/hamburgers/
※ CDNが利用できます。hamburgers.min.css
|
1 |
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hamburgers/1.1.3/hamburgers.min.css"> |
※ サンプルHTML
hamburger- -arrowの部分を、書き換えるだけで、様々なエフェクトを試すことができます。
|
1 2 3 4 5 |
<div class="hamburger hamburger--arrow"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> |
以下のスクリプトを／bodyの(※注意 body終了)直前に記述し、動作してみてください。
※ 引用先
https://github.com/jonsuh/hamburgers/blob/master/dist/example.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> /** hamburgerアニメーションコード **/ var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)}; var hamburgers = document.querySelectorAll(".hamburger"); if (hamburgers.length > 0) { forEach(hamburgers, function(hamburger) { hamburger.addEventListener("click", function() { this.classList.toggle("is-active"); }, false); }); } </script> |
See the Pen
hamburgers by nakatax (@cocohp)
on CodePen.
▶ボタンができたら、レスポンシブメニューを実装してみよう。
|
1 2 3 4 5 6 7 8 |
/*CSSの記述*/ /*ナビゲーションはあらかじめ非表示にしておく*/ nav{display:none;} /*600px以上のモニターは、ナビゲーションを表示させる*/ @media screen and (min-width:600px) { nav{display:block;} } |
|
1 2 3 4 5 6 7 8 |
/*.hamburgerをクリックするとnavがオープンする*/ <script> $(function(){ $(".hamburger").click(function() { $("nav").slideToggle(); }); }); </script> |
transitionとは
時間的な変化を用いて、表現できるアニメーションです。下記によるプロパティの値を、まとめて指定することができます。
| transition-property | transition を適用するプロパティ |
|---|---|
| transition-duration | トランジションの変化に用いる時間（秒：単位はs) |
| transition-timing-function | トランジションの変化を指定 イージングの基本を見て見ましょう。 https://developers.google.com/ ・ default ・ linear（一定のスピード） ・ ease-in(ゆっくり始まる) ・ ease-out(ゆっくり終わる) ・ ease-in-out(ゆっくり始まりゆっくり終わる) |
| transition-delay | トランジションが開始されるまでの時間 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#sample { margin:30px; width:100px;height:100px; padding:10px; background-color:black; color:#fff; font-size:small; display:block; transition: 0.5s ease; } /*hoverすると、90度傾く*/ #sample:hover{ transform: rotate(90deg);} |
▶ボタンができたら、レスポンシブメニューを実装してみよう。