画像が使えるアニメ効果付きドロップダウンメニュー「EliteBox Menu」
当ページのリンクには広告が含まれています。
スポンサーリンク
画像が使えるアニメ効果付きドロップダウンメニューを実装するプラグイン「EliteBox Menu」を紹介します。
jQueryプラグイン「EliteBox Menu」
このプラグインを使えば、非常に多彩な機能をもつドロップダウンメニューを実装することができます。
- 画像が使える
- マウスオーバーでアニメーション
- レスポンシブ
スポンサーリンク
それではデモページで、メニューをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="EliteBox Menu のデモでーす。">
<title>jQueryプラグイン - EliteBox Menu</title>
<link rel="stylesheet" href="eliteBoxMenu.css" />
</head>
<body>
<h1>EliteBox Menu のデモでーす。</h1>
<div class="eliteBoxMenu">
<ul>
<li><a href="#" data-image="images/01-red.png"><span>めにゅー</span><span>さぶたいとる</span></a>
<ul>
<li><a href="#">アイテム</a></li>
<li><a href="#">アイテム</a></li>
</ul>
</li>
<li><a href="#" data-image="images/02-orange.png"><span>めにゅー</span><span>さぶたいとる</span></a>
<li><a href="#" data-image="images/03-yellow.png"><span>めにゅー</span><span>さぶたいとる</span></a>
<ul>
<li><a href="#">あいてむ</a></li>
<li><a href="#">あいてむ</a></li>
<li><a href="#">あいてむ</a></li>
<li><a href="#">あいてむ</a></li>
<li><a href="#">あいてむ</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/eliteBoxMenu_min.js"></script>
<script>
jQuery(document).ready(function($){
//Default usage
$(".eliteBoxMenu ul").eliteBoxMenu({
mainWidth: 188
});
});
</script>
</body>
</html>
スポンサーリンク