シンプルなドロップダウンリストを実装できる「Simple Dropdown List」

当ページのリンクには広告が含まれています。

jQuery Plugin » アニメーション » シンプルなドロップダウンリストを実装できる「Simple Dropdown List」

シンプルなドロップダウンリストを実装できるプラグイン「Simple Dropdown List」を紹介します。

jQueryプラグイン「Simple Dropdown List」

このプラグインを使えば、その名の通りシンプルなドロップダウンリストを簡単に実装することができます。

しかもドロップダウンのスピードまで調節できる優れものです。

デモのページ上部にあるドロップダウンリストをクリックしてみてください。ふわっとリストが表示されます。もう一度クリックすると再びふわっとリストが閉じていきます。

「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>

Simple Dropdown List plugin

jQueryプラグイン「Simple Dropdown List」

デモのソース（HTML + jQuery）

関連記事（一部広告含む）