初心者のためのWEBデザイナーの教科書

CSSで作るトグルボタン

CSSで作るトグルボタン

今回は、CSSで実装してみましょう。さらにクリック後、trantitonを用いて、クローズボタンに変化させます。まず、”toggle”エリアをつくり、spanを三つ記述します。このspanタグにボーダーブロパティを実装することで、三本ラインを描写することができます。

このままだと、何も出ません。ボーダーを利用して、三本ラインを描写してみましょう。

:nth-child

疑似クラス
兄弟要素のグループの中での位置に基づいて指定することが可能になります。例えば、:nth-child(3)と記述すると、それは3番目の要素を指していることになります。整列する出番の多いリストタグなどに使うと便利な擬似クラスです。

もうお分かりでしょうか?1番目、2番目、3番目のspanを、それぞれ少しずつずらすことで、三本ラインになるのです。※:nth-child擬似クラスは、様々な順番を指定することができる万能タグです。他にも、奇数や偶数だけを選別したり多彩な指定方法も用意されています。https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

下記のスクリプトを用いて、クリック後の動作を(‘active‘)へパスさせます。

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

※ サンプルHTML
hamburger- -arrowの部分を、書き換えるだけで、様々なエフェクトを試すことができます。

以下のスクリプトを/bodyの(※注意 body終了)直前に記述し、動作してみてください。
※ 引用先
https://github.com/jonsuh/hamburgers/blob/master/dist/example.html

See the Pen
hamburgers
by nakatax (@cocohp)
on CodePen.


ボタンができたら、レスポンシブメニューを実装してみよう。


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 トランジションが開始されるまでの時間
カーソルを乗せると90度傾きます。


ボタンができたら、レスポンシブメニューを実装してみよう。