• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

技術情報・Tips

CSSのみ!クリックでメニューが回転して開閉する3Dアニメーションサンプル

CSSのみ!クリックでメニューが回転して開閉する3Dアニメーションサンプル

今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプルをご紹介します。

ちなみに、レスポンシブ表示にも対応させています。

CSSのみでクリック開閉する3Dアニメーションメニュー

このサンプルの最終的イメージがこちら。

デモ

See the Pen 3D rotating hidden menu using only CSS by digistate (@digistate) on CodePen.

HTML構造

メニューの開閉トリガーとなるinput, label要素

メニューが開閉するためのトリガーとなる右端にあるハンバーガーアイコンは、実際はlabel要素であり、ページ上は非表示にしているチェックボックス(input)要素に関連付けられています

CSSの:checked 疑似セレクタにより、チェックボックスのチェック有無で開閉時それぞれのCSSを用意しますが、このトリガー要素となるinputとlabel要素をまずは記述します。

ページのヘッダーとメインコンテンツ

ページの左上にあるサイトタイトルや先述の右端のハンバーガーアイコンが表示されるページヘッダーバーheader要素、その後のメインコンテンツmain要素で構成しています。

回転開閉するメニュー

最後に、ハンバーガーアイコン(チェックボックス)のクリックで回転して現れる開閉メニューnav要素を追加します。

メニュー関連のCSS

回転するメニューは、メニューの高さ分をY軸方向に移動し、X軸方向に90度回転しておいて隠しておきます。
そして、ハンバーガーアイコンをクリックすると、移動しておいた分のメニューの高さと回転した90度を0度に戻すことで、折りたたまれていたメニューが起き上がるようなアニメーションで現れる仕組みです。

開閉アニメーションのイメージ

ハンバーガーアイコン(チェックボックス)

ヘッダーバー右端のハンバーガーアイコンは、label要素でチェックボックス(input)要素と関連付けていますが、チェックボックス自体は表示させないため、隠しておきます。

回転メニューのラッパー要素(nav)

隠れている回転メニューは、リスト(ul)で構成され、これをnav要素で括っています。
実際に回転(rotateX)するのはリストで、メニューの高さ分を移動しているのはラッパーにあたるnav要素です。

3Dアニメーションとして奥行きを持たせるため、nav要素にはperspectiveパラメータで視点の位置をセットしておきます。

回転メニュー(ul)のスタイル

メニューにあたるリスト(ul)の初期値は、メニューの下部を基点として奥へ90度回転(rotateX(90deg))しておきます。

メニューを表示したときのスタイル

ヘッダーバーとメインコンテンツのスタイル

メニューが表示された(チェックボックスにチェックが入った :checked)ときは、ページのヘッダーバー(header)とメインコンテンツ(main)は表示されるメニューの高さ分を下に移動(translateY(160px))します。

回転メニューのラッパー(nav)のスタイル

回転メニューのラッパーは、フレームアウトさせていたメニューの高さ分を元の位置(translateY(0))に戻します。

回転メニュー(ul)のスタイル

回転メニューは、90度回転して奥に倒している状態なので、表示する際はこれを元に戻します(rotateX(0))。

ざっくりですが、基本はこれだけで3Dアニメーションで回転表示するメニューが表現できます。

【応用編】Javascriptを利用してよりインタラクティブなアニメーションを付ける

CSSのみのメニューの回転アニメーションに加え、Javascriptを利用してメニューのマウスオーバー時にメニューごとに指定した背景カラーを持つレイヤーをスライドさせ、メニューリンクをクリックした際にはメニューを閉じてからナビゲートさせるように応用してみます。

完成イメージはこちら。

デモ

See the Pen 3D rotating hidden menu with mouseover background color by digistate (@digistate) on CodePen.

メニューのHTML構造

CSSのみのバージョンと異なる部分は、回転メニューのリストの各アイテム(li)にdata-bar-colorというデータ属性を付けて、メニューごとのカラーコードを指定し、メニューリスト(ul)の後に変色しながらスライド移動する背景レイヤーのための .menu_sliderというセレクタを持つspanを挿入しています。

Javascript(jQuery)の動作の説明

スライドする背景レイヤーの表示位置は、マウスオーバー状態にある対象メニューの左端の位置に常に合わせ、背景カラーは対象メニューに指定されているdata-bar-colorの値に常に変化します。

おまけ

マウスオーバー時に、メニューのアンダーバーがホバー中のメニューにスライドしてついてくるパターンのサンプルはこちら。

See the Pen 3D rotate hidden menu by digistate (@digistate) on CodePen.

URL
TBURL

COMMENT ON FACEBOOK

Return Top