円状のメニューを作成できるJavaScript「Extremes」

メニューを円状に置けるとデザインの幅が広がり、面白い表現ができそうです。
jQueryプラグインのExtremes jQuery plug-inを利用すると簡単に実現できます。

sponsors

使用方法

Extremes jQuery plug-inからファイル一式をダウンロード。

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="extremes.js"></script>
<script>
$(function() {
	$('.class名').extremes({
	    diameter: 25 //中心点からの距離
	});
});
</script>
あとは上記のclassをふれば完成です。

<ul class="simple">
	<li>menu1</li>
	<li>menu2</li>
	<li>menu3</li>
</ul>
あとは適宜CSSで調整すればOKです。
画像とかで対応してみてもよさそうです。

サンプル


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

sponsors