skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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」でポップなメニューを作成するサンプル