mootoolsで洗練されたメニューを作成する「Lavish Menu」

メニューはサイトを構成する重要な要素であり、最も目に触れる部分です。
そのデザインにこだわる方に、以前華麗なメニューを作成するjavascript「FancyMenu」を紹介しましたが、今回のも負けてはいません。
JavaScriptライブラリmootoolsの「Lavish Menu」です。

sponsors

使用方法

Lavish Menuからlavishmenu.jsをmootoolsからmootools.jsとmootools-1.2-slide.jsをダウロードします。

<script src="mootools-1.2.1-core.js" type="text/javascript"></script>
<script src="mootools-1.2-slide.js" type="text/javascript"></script>
<script type="text/javascript" src="lavishmenu.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
	$$('ul').lavishmenu({ //要素名
		'backgroundColor': '#333333', //背景色
		'opacity': 1
	});
});
</script>
あとは以下を記述すれば完成です。

<ul>
	<li><a href="リンク">リンクテキスト</a></li>
	<li><a href="リンク">リンクテキスト</a></li>
	<li><a href="リンク">リンクテキスト</a></li>
</ul> 
メニューは縦でも横でもスムーズに背景が動きます。

サンプル

sponsors

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