mootoolsで3Dメニュー「Javascript 3D Cube Menu」

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
mootoolsで3Dメニュー「Javascript 3D Cube Menu」

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2009年06月28日｜記事提供：すくえあ

サイトの重要要素、メニューがこんな風にできると凄く印象的になります。
Javascriptライブラリmootoolsを利用したJavascript 3D Cube Menuです。

使用方法
Javascript 3D Cube Menuからcube-menu.jsとinit-cube-menu.jsを、mootoolsからmootools.jsをダウンロードします。

init-cube-menu.js内にはメニューに表示する画像パスがありますので適宜調整してください。
最後に以下のように、画像の上に乗るテキストをCSSで調整すれば完成です。
.cube-text { position: absolute; padding-left: 5px; padding-right: 5px; text-decoration: none; color: #fff; }
※マウスホイールで拡大・縮小も可能です。
mootoolsで3Dメニュー「Javascript 3D Cube Menu」サンプル