簡単にドロップダウンメニューがつくれる「Superfish」
当ページのリンクには広告が含まれています。
スポンサーリンク
簡単にドロップダウンメニューがつくれるjQueryプラグイン「Superfish」を紹介します。
jQueryプラグイン「Superfish」
メニューバーにマウスオーバーするとびよーんとメニューのメニュー？が出てくる！よくみるアレです。あのプラグインです。
スポンサーリンク
デモでドロップダウンメニューの動作を確認してみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superfish dropdown menu - jQueryプラグインまとめのカルマ</title>
<link rel="stylesheet" href="css/superfish.css" media="screen">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/superfish.js"></script>
<script>
$(document).ready(function() {
$('#demo').superfish();
});
</script>
</head>
<body>
<ul id="demo" class="sf-menu">
<li class="current">
<a href="../../">めにゅー①</a>
<ul>
<li>
<a href="../../">アイテム</a>
</li>
<li class="current">
<a href="../../">アイテム</a>
<ul>
<li class="current"><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>
<li>
<a href="../../">アイテム</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>
<li>
<a href="../../">アイテム</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>
</li>
<li>
<a href="../../">メニュー②</a>
</li>
<li>
<a href="../../">メニュー③</a>
<ul>
<li>
<a href="../../">アイテム</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>
<li>
<a href="../../">アイテム</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>
<li>
<a href="../../">アイテム</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>
<li>
<a href="../../">アイテム</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>
<li>
<a href="../../">アイテム</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>
</li>
<li>
<a href="../../">メニュー④</a>
</li>
</ul>
</body>
</html>
スポンサーリンク