まだデータがありません。
画像が使えるアニメ効果付きドロップダウンメニュー「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>
スポンサーリンク