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

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

sponsors

使用方法

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]-->
これで完成です。

サンプル

Javascriptサンプルページ一覧
skuare.net

sponsors