画像を使ったアコーディオンメニュー「Accordion Image Menu」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像を使ったアコーディオンメニューを実装するプラグイン「Accordion Image Menu」を紹介します。
jQueryプラグイン「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>
スポンサーリンク