Blog

最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた

最近、↓こちらのサイトのように、

Leen Heyne

47株式会社 | もっと暮らしやすくなるための日本づくり

CSS3のアニメーションで3本線のアイコンから×のアイコンに切り替わるメニュボタンを見かけることがありました。

 

これまで私はメニューボタンの切り替えのとき、それぞれのアイコン画像を用意して切り替える方法をとっていたのですが、

CSS3を使った方法だと画像を用意する必要もなく、アニメーションも面白いと思ったので、

今後そちらを使えるようにしたいと思って、再現してみることにしました。

 

↓こちらが作ってみたもの

DEMO

 

方法

いくつか種類があるようですが、一番シンプルな「Leen Heyne」さんのものを今回は再現してみました。

方法は、CSS3のtransitionとtransformを使ってアニメーションさせます。

 

HTML

HTMLのメニューボタンを配置したいところに、こちらのHTMLを記述します。

<span>がメニューボタンのそれぞれの線になります。

 

CSS

続いてCSSの設定をします、

<a>で作ったメニューボタンの本体は正方形として、適当な大きさのものを配置します。

このとき<a>の中には”position: absolute;”で<span>を配置するため、

配置の基準となるように”position: relative”, “position: absolute”, “position: fixed”のいずれかを指定しておきます。

 

<a>の中の<span>は”position: absolute;”でそれぞれ等間隔になるように配置して、

“transition: all 0.4s;”を指定して、CSSの変化がアニメーションするように設定しておきます。

 

続いて変化させた後の指定を行います。

メニューボタンの本体である<a>に”active”というクラスがついた状態のときをセレクタとして、変化後の状態を記述します。

変化後の状態は、

まず真ん中の<span>(#menuButton.active span:nth-child(2))が見えなくなるように、”opacity: 0;”を指定します。

続いて上下の<span>(#menuButton.active span:first-childと#menuButton.active span:first-child)を、

transformのrotateで45度回転させます。

ただ、transformのrotateでは、要素の中心を中心として回転させるため、

この指定だけでは×にはなりません。

そこで、transformのtranslateで少し上下の位置を調整して、

上と下の<span>が交差するようにします。

image01

これでCSSの設定は終わりです。

 

jQuery

ただ今回の場合、「active」というclassを切り替えなければならないので、

↑のjQueryコードを使ってclassの切り替えを行います。

これでメニューボタンの切り替えアニメーションは完成です。

 

ここで再現した以外にも、↓のサイトようなアニメーションなどいろいろなものがあるので、

今後、取り入れてみたいと思います。

Hello Monday

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ