Tweet｜ ｜ ｜ ｜

[ 1分で読めて簡単導入できます]

サイトの重要要素、メニューがこんな風にできると凄く印象的になります。
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日