【jQuery】ドロップダウンメニューをコピペで簡単に作る方法

ドロップダウンメニューをHTMLとCSSとjQueryで簡単実装しよう！

DEMO

下のHTMLとCSSとjQueryをコピーしたらできるよ！
ボタンの色やフォントサイズは好きなように指定してください！

HTML

<div id="dropdown-menu">
　<p>ドロップダウンメニュー</p>
　<ul>
　　<li>ドロップダウン1</li>
　　<li>ドロップダウン2</li>
　　<li>ドロップダウン3</li>
　　<li>ドロップダウン4</li>
　　<li>ドロップダウン5</li>
　　<li>ドロップダウン6</li>
　</ul>
</div>

CSS

#dropdown-menu {
　position:relative;
　font-size: 16px;
　text-align: center;
　width: 230px;
　height: 300px;
　display:block;
}
#dropdown-menu p {
　background: #03b876;
　display:block;
　padding: 12px 0;
　color: #fff;
　cursor: pointer;
}
#dropdown-menu ul {
　position: absolute;
　top: 51px;
　left: 0;
　width: 100%;
　height: 0;
　overflow:hidden;
}
#dropdown-menu li {
　padding: 12px 0;
　display:block;
　background: #eeeeee;
　box-shadow: 0 3px 9px -6px rgba(0,0,0,.8) inset
}
#dropdown-menu li:nth-of-type(even) {
　background: #e2e2e2;
}

jQuery

var menu = $("#dropdown-menu");
menu.on("click", function() {
　if(menu.find("ul").height() == 0) {
　　menu.find("ul").animate({height: menu.find("li").length * 51 },400);
　}else{
　　menu.find("ul").animate({height: 0},200);
　}
});