Tweet｜ ｜ ｜ ｜

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

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

使用方法
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>

メニューは縦でも横でもスムーズに背景が動きます。

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

記事作成：2009年04月16日