今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. マウスオーバーでサイズが変化するパネルを実装する「Kwicks」
  3. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  4. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  5. アニメ効果がおもしろいモーダルボックス「Avgrund Modal」

画像を使ったアコーディオンメニュー「Accordion Image Menu」

スポンサーリンク

画像を使ったアコーディオンメニューを実装するプラグイン「Accordion Image Menu」を紹介します。

jQueryプラグイン「Accordion Image Menu」

このプラグインを使えば、お好みの画像を使ったアニメ効果付きのアコーディオンメニューを実装することができます。

オプションではさまざまなアニメ効果を設定することができます。

スポンサーリンク

それではデモページの画像を使ったアコーディオンメニューをご覧ください。

「Accordion Image Menu」のデモ

ソース( HTML + jQuery )


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Accordion Image Menu のデモでーす。">
<title>Accordion Image Menu - jQueryプラグイン</title>

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="jquery.accordionImageMenu.min.js"></script>
<link href="accordionImageMenu.css" rel="stylesheet" type="text/css" />
<script>
$(document).ready(function() {
  $('#demo').AccordionImageMenu({
    'border' : 1,
    'openItem':0,
    'duration': 400,
    'openDim': 310,
    'closeDim': 160,
    'effect': 'easeOutQuint',
    'fadeInTitle': false,
    'height':100 
  });	
});
</script>
</head>
<body>
<h1>Accordion Image Menu のデモでーす。</h1>

<div id="demo" style="margin:0 auto">
<a href="#">
  <span>赤だよー</span>
  <img src="images/01-red.png" width="300" height="200" />
</a>
<a href="#">
  <span>橙だよー</span>
  <img src="images/02-orange.png" width="300" height="200" />
</a>
<a href="#">
  <span>黄だよー</span>
  <img src="images/03-yellow.png" width="300" height="200" />
</a>
<a href="#">
  <span>緑だよー</span>
  <img src="images/04-green.png" width="300" height="200" />
</a>
<a href="#">
  <span>青だよー</span>
  <img src="images/05-blue.png" width="300" height="200" />
</a>
<a href="#">
  <span>藍だよー</span>
  <img src="images/06-indigo.png" width="300" height="200" />
</a>
<a href="#">
  <span>紫だよー</span>
  <img src="images/07-purple.png" width="300" height="200" />
</a>
</div>

</body>
</html>
スポンサーリンク

関連記事(一部広告含む)