5

12月

2011

画像さくさくアコーディオンメニュー「image menu」実装

ImageMenu

アコーディオンメニューの中で最も好きなスクリプトです。
ハイテク系の企業サイトなんかにはとても似合うかも知れません。

使用するAjaxライブラリはMooTools
ダウンロードファイルにあらかじめ同梱されています。

実装サンプル

サイズは総幅500px/高さ200px・5ブロックで作成、用意した画像は幅300px/高さ200px

ダウンロードと修正

image menu – phatfusion

ダウンロードした「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:300 //オープン時の画像幅
	});
});
</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>

以上です。
それでは、がんばってください。

ややこしいスクリプトなので説明するのがかなりめんどくさかった・・・。

コメント

  • サイトウリュータ

    この記事へのコメントはまだありません。ご意見やご感想をコメントしていただけるとうれしいです。
    投稿後、すぐには反映されませんのでご了承ください。

コメントフォーム




サイトウリュータ

カテゴリ

最近の記事

注目の記事

Follow me