アコーディオンメニューの中で最も好きなスクリプトです。
ハイテク系の企業サイトなんかにはとても似合うかも知れません。
使用するAjaxライブラリはMooTools。
ダウンロードファイルにあらかじめ同梱されています。
サイズは総幅560px/高さ200px・5ブロックで作成、用意した画像は幅310px/高さ200px
ダウンロードと修正
ダウンロードした「imagemenu/imagemenu/imageMenu.css」を、使用環境に合わせて修正する必要があります。
修正するのは#imageMenuで指定されている総幅と高さ、#imageMenu ul li aで指定されている各ブロックの幅（（総幅－8px）÷ブロック数）と高さ、#imageMenu ul liの各クラス指定の画像URL。
デフォルトでは総幅500px/高さ200px・各ブロック幅98px/高さ200pxとなっています。その部分を、導入するウェブサイトの条件に合わせて修正します。
あとは#imageMenu ul li.クラス名を独自のものに変更（今回は#imageMenu ul li.m01～m05に設定）し、それぞれのbackgroundで指定されている画像URLを自身で用意した画像のURLに書き換え。
ulにmargin: 0; padding: 0;を指定する必要がありますので、今回はul.imgmenuというクラスを設定して下記のようにCSSファイルに追加記入しました。
ul.imgmenu {margin: 0; padding: 0;}
実装手順
修正を全て終え、用意した画像をimagemenu/imagemenu/imagesフォルダに入れたら、サーバーにimagemenuフォルダ全てをアップロード。
URLを間違えないように気を付けながら<head>～</head>に以下を記述。
<link rel="stylesheet" href="http://アップロードしたURL/imageMenu.css" type="text/css" /> <script type="text/javascript" src="http://アップロードしたURL/mootools.js"></script> <script type="text/javascript" src="http://アップロードしたURL/imageMenu.js"></script> <script type="text/javascript"> window.addEvent('domready', function(){ var myMenu = new ImageMenu($$('#imageMenu a'),{ openWidth:310 //オープン時の画像幅 }); }); </script>
image menuを表示させる場所に以下を記入。
<div id="imageMenu"> <ul class="imgmenu"> <li class="m01"><a href="ページ01のURL">ページ01</a></li> <li class="m02"><a href="ページ02のURL">ページ02</a></li> <li class="m03"><a href="ページ03のURL">ページ03</a></li> <li class="m04"><a href="ページ04のURL">ページ04</a></li> <li class="m05"><a href="ページ05のURL">ページ05</a></li> </ul> </div>
以上です。
それでは、がんばってください。
ややこしいスクリプトなので説明するのがかなりめんどくさかった・・・。
こんにちは。このスクリプトが気にいり説明もあったので早速設置してみました。ひとつ筆問なのですが、画像をクリックしてもリンク先に飛ばず、WEBページからのメッセージと表示されてしまいます。このサイトのサンプルも同様な動きですが、リンク先へ飛ばすにはどうしたらよいのでしょうか？
コメント by nao — 2009年9月20日 @ 3:24 PM
naoさん、こんばんは。
このサンプルに使用する以外、他のサイトに導入したことが無かったのでその点にはまったく気が付きませんでした。ご指摘ありがとうございます。
headに書き込むscript部分をちょっと修正しておきましたので再度コピペして試してみてください。
では。
コメント by Daisuke — 2009年9月20日 @ 7:19 PM
Daisukeさん、こんばんは。早速の返答と対応ありがとうございます。
おかげさまで、うまくリンクへジャンプできるようになりました。ありがとうございました。またなにかありましたら教えてください！
コメント by nao — 2009年9月20日 @ 9:44 PM
Daisukeさん、こんにちは。もうひとつ教えてください。
マウスを画像の上の合わせると、画像が表示されるように、スライドしますが、このスライドの動き幅はどのように設定するのでしょうか？200pxサイズの画像が300pxくらいスライドして表示されてしまいます。
コメント by nao — 2009年9月22日 @ 5:46 PM
naoです。上記記載ありましたね。見落としていました。お騒がせしました。
コメント by nao — 2009年9月22日 @ 6:18 PM