シンプルなドロップダウンリストを実装できる「Simple Dropdown List」
当ページのリンクには広告が含まれています。
スポンサーリンク
シンプルなドロップダウンリストを実装できるプラグイン「Simple Dropdown List」を紹介します。
jQueryプラグイン「Simple Dropdown List」
このプラグインを使えば、その名の通りシンプルなドロップダウンリストを簡単に実装することができます。
しかもドロップダウンのスピードまで調節できる優れものです。
スポンサーリンク
デモのページ上部にあるドロップダウンリストをクリックしてみてください。ふわっとリストが表示されます。もう一度クリックすると再びふわっとリストが閉じていきます。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Simple Dropdown Listのデモでーす。">
<title>Simple Dropdown List - jQueryまとめのカルマ</title>
<link href="css/jquery.simpledropdown.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simpledropdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dropdown1").simpledropdown({speed:300});
});
</script>
</head>
<body>
<h1>Simple Dropdown Listのデモでーす</h1>
<div id="dropdown1">
<ul>
<li><a href="#">ドロップダウンリスト</a></li>
<li>
<ul>
<li><a href="#">アイテム</a></li>
<li><a href="#">アイテム</a></li>
<li><a href="#">アイテム</a></li>
<li><a href="#">アイテム</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
スポンサーリンク