skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
JavaScript 3D Cube Menuからcube-menu.jsとinit-cube-menu.jsを、mootoolsからmootools.jsをダウンロードします。
<script src="mootools-1.2.1.js" type="text/javascript"></script>
<script src="cube-menu.js" type="text/javascript"></script>
<script src="init-cube-menu.js" type="text/javascript"></script>

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」サンプル

記事作成：2009年06月28日

前の記事：これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
次の記事：でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」