縦も横もOKのアコーディオンメニューBySlideMenu

BySlideMenuは、サイドバーのメニューなんかにも活用可能な「縦型」のアコーディオンメニューを実装出来るスクリプト。

もちろんimage menuのような横開きのスタイルも用意されています。
動きのある縦型のメニューが欲しかった！そんな人に超オススメ。

このサンプルではBLOCK-01（1番上の画像）を最初からオープンさせるためにbyslidemenu.jsのoptions:でdefaultIndex: 1に設定してありますが、デフォルトではdefaultIndex: falseとなっていますので全てのブロックが等間隔で表示されます。
その他の指定も全てbyslidemenu.jsのoptions:で行います。
　
ちなみにimagemenuがCSSによる画像置き換え（text-indent: -9999px;ってやつ）を採用しているのに対し、このBySlideMenuは画像そのものを重ねて表示するスクリプトです。
お好みに応じて使い分けても良いと思います。

ダウンロード

BySlideMenu – ByScripts

Ajaxライブラリmootools-core.jsを別途用意する必要があります。
mootoolsダウンロード
※mootools-1.2.3-core-nc.jsはjsファイルではなくtxtファイルとして認識される場合があります。mootools-1.2.3-core-nc.js.txtになっていると動作しませんのでテキストエディタ等で一旦開き、「名前を付けて保存する」で.txt無しのファイル名にリネームしてください。

実装手順

mootools-core.jsとbyslidemenu.js、それと画像をサーバーにアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
※横型メニューの場合は赤字部分を削除

<script type="text/javascript" src="http://アップロードしたURL/mootools-core.js"></script>
<script type="text/javascript" src="http://アップロードしたURL/byslidemenu.js"></script>
<script type="text/javascript">
window.onload = function(){
new BySlideMenu('verticalmenu', {vertical: true});
}
</script>

BySlideMenuを表示させる場所に以下を記入。
※横型メニューの場合は赤字部分をbyslidemenuに変更

<ul id="verticalmenu">
 <li><a href="ページ1"><img src="画像1" /></a></li>
 <li><a href="ページ2"><img src="画像2" /></a></li>
 <li><a href="ページ3"><img src="画像3" /></a></li>
 <li><a href="ページ4"><img src="画像4" /></a></li>
 <li><a href="ページ5"><img src="画像5" /></a></li>
</ul>

BySlideMenuはバリエーションが豊富なのでいろいろと楽しめるのではないでしょうか。
では、がんばってください。

«
»

コメントはまだありません

コメントは管理者の承認後に表示されます




Comment