華麗なメニューを作成するjavascript「FancyMenu」

メニューを作成する時にjavascriptやCSSでロールオーバーした時に異なる印象を与える仕組みを作ることがあります。
そのロールオーバーに新たな仕組みをdevthoughtFancy menuが提供しています。
fancymenu

使用方法
javascriptライブラリ「mootools」とfancymenu.jsをダウンロードしてhead内に挿入します。
次にstyle属性にfancymenu.cssも挿入します。長くなるので割愛しますが、適宜HTMLの方と合わせてください。
なおPNGファイルが対応していないIEにも、GIF画像を指定することで適応させています。
最後にHTMLに以下を書き込めば完成です。
<script>
window.addEvent('domready', function() {
new SlideList($E('ul', '好みのid名'), {transition: Fx.Transitions.backOut, duration: 700, onClick: function(ev, item) { ev.stop(); }});
});
</script>
<div id="好みのid名">
<ul>
<li class="current" id="menu_home"><a href="#">Home</a></li>
<li id="menu_plantatree"><a href="#">Plant a tree</a></li>
<li id="menu_travel"><a href="#">Travel</a></li>
<li id="menu_rideanelephant"><a href="#">Ride an elephant</a></li>
<li class="background"><div class="left">&nbsp;</div></li>
</ul>
</div>

華麗なメニューを作成するjavascript「FancyMenu」サンプル
注意:
影の初期値はclassでcurrentを指定したidになります。
divの中で、&nbsp;としているところは、&(全角)を&(半角)にしてください
項目を増やしたい場合は<li id="id名"><a href="#">メニュー名</a></li>を追加し、CSSと画像も追加してください。
classでbackgroundとしているのは影ですので消さないでください。
id名などはCSSで指定したものと必ず対応させてください。

sponsors

「華麗なメニューを作成するjavascript「FancyMenu」」をシェアする

記事作成:
記事URL:

TOP > > > 華麗なメニューを作成するjavascript「FancyMenu」