skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
mootoolsで洗練されたメニューを作成する「Lavish Menu」
｜
｜
｜
｜
｜
｜
メニューはサイトを構成する重要な要素であり、最も目に触れる部分です。
そのデザインにこだわる方に、以前華麗なメニューを作成する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日
▼mootoolsで洗練されたメニューを作成する「Lavish Menu」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：クールな画像ギャラリーを作成できるJavaScript「UvumiTools Gallery Plugin」
次の記事：フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
