Drop ドロップリスト

Drop - サンプル① 

<div class="button-group">
	<button class="button js-drop" type="button" data-drop="#menu1">
		ドロップリスト - ダウン
		<span class="caret-down"></span>
	</button>
	<ul class="drop drop--down" id="menu1" data-drop-menu>
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
	</ul>
</div>
<div class="button-group">
	<button class="button js-drop" type="button" data-drop="#menu2">
		ドロップリスト - アップ
		<span class="caret-down"></span>
	</button>
	<ul class="drop drop--up" id="menu2" data-drop-menu>
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
	</ul>
</div>
<div class="button-group">
	<button class="button js-drop" type="button" data-drop="#menu3">
		ドロップリスト - レフト
		<span class="caret-down"></span>
	</button>
	<ul class="drop drop--left" id="menu3" data-drop-menu>
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
	</ul>
</div>
<div class="button-group">
	<button class="button js-drop" type="button" data-drop="#menu4">
		ドロップリスト - ライト
		<span class="caret-down"></span>
	</button>
	<ul class="drop drop--right" id="menu4" data-drop-menu>
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
	</ul>
</div>

Drop - サンプル② 

<div class="button-group">
	<button class="button js-drop" type="button" data-drop="#menu5">
		ドロップリスト - ヘッダー付き
		<span class="caret-down"></span>
	</button>
	<ul class="drop drop--down" id="menu5" data-drop-menu>
		<li class="drop-heading">カテゴリー１</li>
		<li><a href="#">メニュー１</a></li>
		<li><a href="#">メニュー２</a></li>
		<li><a href="#">メニュー３</a></li>
		<li class="drop-heading">カテゴリー２</li>
		<li><a href="#">メニュー４</a></li>
		<li><a href="#">メニュー５</a></li>
		<li><a href="#">メニュー６</a></li>
	</ul>
</div>

Drop - サンプル③