javascriptライブラリ「mootools」でポップなメニューを作成する

｜ ｜ ｜ ｜ ｜ ｜

メニューは訪問者が一番目にする機会の多い場所です。
そのため、目立ち、わかりやすいメニューを作成することが求められます。
popMenuではmootoolsを使用し、簡単に動きのあるメニューを作成する方法を紹介しています。

作成方法
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script type="text/javascript">
Window.onDomReady(function(){
Window.disableImageCache();
$S('#id名 li a').each(function(el) {
var effect = el.effect('background-position', {duration: 500, wait: false, transition: fx.Transitions.circOut, fps: 50}).set(-300);
el.addEvent('mouseover', effect.goTo.pass(0, effect)).addEvent('mouseout', effect.goTo.pass(-300, effect));
});
});
</script>
上記をhead内に埋め込み、対応するCSSを以下の通りに記述します。
<style type="text/css">
ul { list-style: none; margin: 0; padding: 0; }
li { display: block; width: 301px; margin-bottom: 5px; }
a { display: block; color: #666; text-decoration: none; padding: 10px 20px; background: #eee url(background.png) no-repeat -300px 0px; }
a:hover { color: #C00; }
a span {width: 261px;display: block;}
</style>
最後にメニューを書けば完成です。
<ul id="id名">
<li><a href="#"><span>menu</span></a></li>
<!-- メニュー分 -->
</ul>
javascriptライブラリ「mootools」でポップなメニューを作成するサンプル

2007年10月13日

前の記事：回転式の画像ギャラリーjavascript「MooRevolver」
次の記事：マトリックス風にテキストを表示するjavascript

関連記事

• mootoolsで、いい感じに横スクロールするJavaScript「mooHorizonSlider」
• [mootools]mooVRotatingMenu
• [mootools]UI Tabs
• [mootools]click the birds
• [mootools]accordeon and effects

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」