アコーディオンのスクリプト「BySlideMenu」導入

別サイトで「BySlideMenu」をいれてみよ〜♪と思ってはまったのでメモメモ。
ちなみに「BySlideMenu」のサンプルはここにあります。
Link:BySlideMenu – Nice and powerful accordion menu
必要なファイルは2つです。
BySlideMenu.js
MooTools

MooToolsのページで
・core
・Element.Dimensions
・Element.Event
・Fx.Tween
・Fx.Transitions
を選び、ダウンロードしました。
(このあたりは合っているかどうか不明。
デフォルトの場合は普通にダウンロードするだけでOKだと思います。)

・導入の手順
<head>〜</head>の間で上の2つのファイルを読み込む

<script type=”text/javascript” src=”(ファイルを置いた場所)mootools-core.js” charset=”shift_jis”></script>
<script type=”text/javascript” src=”(ファイルを置いた場所)byslidemenu-1.1.js” charset=”shift_jis”></script>

<body>以下に

<ul id=”byslidemenu”>
<li><img src=”(読み込みたい画像ファイル)1.jpg”></li>
<li><img src=”(読み込みたい画像ファイル)2.jpg”></li>
<li><img src=”(読み込みたい画像ファイル)3.jpg”></li>
</ul>

次のファイルを</head>の手前に書き込む。(これは外部ファイルでもよさそう)

<script type=”text/javascript”>
window.onload = function(){
new BySlideMenu();
}
</script>

これでデフォルトの動作は確認できました。

サイトに書いてあるとおりにしても動かなかったのですが、理由はよくわかりません。
あと「読み込みたい画像」と書きましたが、テキストでも大丈夫みたいです。
数を増やしたり減らしたりしてもOKです。
オプションを追加したい場合はBySlideMenuのサンプルページにある
Optionsの項目を以下のようについかすればOKです。

<script type=”text/javascript”>
window.onload = function(){
new BySlideMenu(“byslidemenu”, {
[Option]:[Desctiption]
(例えば  expandMode: “click”,pinMode : “click”など)
});
} </script>

参考:
[BySlideMenuライブラリ] メニューを表示する (新JavaScript例文辞典)
[BySlideMenuライブラリ] クリックでメニューを展開する(新JavaScript例文辞典)

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です