一味違ったCUBE型のメニューを作れるjQueryプラグイン「onCube」

一味違ったメニューを作成できるjQueryプラグインonCubeを紹介します。
これであなたのサイトも違うねーと言われることうけあいです。
一味違ったCUBE型のメニューを作れるjQueryプラグイン「onCube」サンプル

使用方法
onCubeからファイルをダウンロード&拡張子をjsにリネームします。
もちろんjQueryからjquery.jsをダウンロードしておきましょう。
まずはJSを記述します。
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="oncube.js" type="text/javascript"></script>
<script>
$(function () {
var linksArr = new Array(); //キューブ一つ一つにリンクを設定
linksArr[1] = ['skuare.net','http://www.skuare.net/'];
linksArr[2] = ['キャプション','リンク先'];
//数字は手前の左上から始まります。
//リンクさせたいだけつけてください。

$("#id名").onCube({
x:50, //横表示位置
y:100, //縦表示位置
color: '#CB0D12', //ボックスカラー
hcolor: '#480505', //マウスオーバー時カラー
size:30, //ボックスサイズ
cubes:2, //キューブ1辺の個数
space: 3, //キューブ間の距離
links:linksArr //リンク設定
});
});
</script>

上記を記述したらCSSを書いていきます。
<style>
div.cube { position:absolute; cursor:pointer; }
div.plane { position:absolute; }
div.tri { position:absolute; width:0; height:0; }
div.quad { position:absolute; }
div.card { display:none; position:absolute; width:100px; color:#000; font-family:Verdana, Geneva, sans-serif; font-size:11px; }
div.card a { color:#000; font-family:Verdana, Geneva, sans-serif; font-size:11px; }
</style>
<!--[if lt IE 7]>
<style type="text/css">
/* Hack for transparent borders in IE6 */
div.tri {
filter: chroma(color=cyan);
overflow:hidden;
font-size:0;
}
div.quad {
overflow:hidden;
font-size:0;
}
</style>
<![endif]-->

これで完成です。

一味違ったCUBE型のメニューを作れるjQueryプラグイン「onCube」サンプル

sponsors

「一味違ったCUBE型のメニューを作れるjQueryプラグイン「onCube」」をシェアする

記事作成:
記事URL:

TOP > > > 一味違ったCUBE型のメニューを作れるjQueryプラグイン「onCube」