今日の人気記事

  1. 上下左右に配置できるスクロールしてもついてくるメニュー「PageScroll jQuery Menu」

シンプルなドロップダウンリストを実装できる「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>
スポンサーリンク

関連記事(一部広告含む)