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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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で指定したものと必ず対応させてください。

記事作成：2007年07月14日

前の記事：Movable TypeでAJAXな投票を可能にするプラグイン「AjaxRating」
次の記事：テキストの書き換えを可能にするjavascript「inLineEdit.js 2」