Make Full Stylish Dropdown use jQuery

Sobat tentu kenal dengan konten drop-down list? Satu rangkaian yang biasa dibuat dengan elemen <select> dan didalamnya ada tags <option> Artikel berikut dapat mewakili bermacam-macam gaya dari dropdown list! Jangan kalian sangka hanya elemen <select> yg dapat membuat konten drop-down. Tag <ol> or <ul> juga dapat melakukan hal serupa! Cek saja kalau tidak percaya decorate tag ol or ul with flip and unfold effect.
AA Koben kembali menemukan source dropdown full stylish karya Hampus Persson. Terintegrasi dengan jQuery script, batas konten yang pasti membuat hal scroll dilakukan di dalam konten. Pusing menjelaskannya bro :D
DEMO Original...

cdpn.io/CbltK

Pemberian value 100% pada properti width, memudahkan penempatan dropdown tersebut ;) Saya hanya merubah SCSS ke CSS saja kok :P

.dropdown {
text-align: left;
color: #343c3f;
border: 1px solid #a2acb0;
}
.dropdown.closed .dropdown-menu {
margin-top: 0px;
}
.dropdown.closed .dropdown-menu li {
height: 0px;
}
.dropdown.closed .title {
border-bottom: none;
}
.dropdown.closed .title:after {
margin-top: -20px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.dropdown .title {
width: 97.7%;
height: 21px;
padding: 10px;
color: #ddd;
cursor: pointer;
background: #222;
position: relative;
border-bottom: 1px solid #d9e1e4;
}
.dropdown .title:after {
display: block;
content: "\25be";
position: absolute;
right: 14px;
margin-top: -20px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.dropdown .dropdown-menu {
position: relative;
overflow: hidden;
max-height: 200px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-box-sizing: "border-box";
-moz-box-sizing: "border-box";
box-sizing: "border-box";
}
.dropdown ul {
position: absolute;
top: 0;
padding: 0;
margin: 0;
/* margin-top: 25px; */
width: 100%;
}
.dropdown ul li {
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 12px;
border-bottom: 1px solid #d9e1e4;
vertical-align: top;
overflow: hidden;
cursor: pointer;
-webkit-transition: margin-top 0.5s, height 0.5s;
-moz-transition: margin-top 0.5s, height 0.5s;
transition: margin-top 0.5s, height 0.5s;
}
.dropdown ul li:hover {
background-color: #ddd;
color: #343c3f;
}

<div class="dropdown closed">
<div class="title">Please Choose!</div>
<div class="dropdown-menu">
<ul>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
<li>Blah Bleh Bloh</li>
</ul>
</div>
</div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var $container = $('.dropdown-menu'),
$list = $('.dropdown-menu ul'),
listItem = $list.find('li');
$(".dropdown .title").click(function () {
if( $container.height() > 0) {
closeMenu(this);
} else {
openMenu(this);
}
});
$(".dropdown-menu li").click(function () {
closeMenu(this);
});
function closeMenu(el) {
$(el).closest('.dropdown').toggleClass("closed").find(".title").text($(el).text());
$container.css("height", 0);
$list.css( "top", 0 );
}
function openMenu(el) {
$(el).parent().toggleClass("closed");
$container.css({
height: 200
})
.mousemove(function(e) {
var heightDiff = $list.height() / $container.height(),
offset = $container.offset(),
relativeY = (e.pageY - offset.top),
top = relativeY*heightDiff > $list.height()-$container.height() ?
$list.height()-$container.height() : relativeY*heightDiff;
$list.css("top", -top);
});
}
});
//]]>
</script>

DEMO modifan...

cdpn.io/xfbAw

Bonus: cdpn.io/CElur

Happy dorpdown \m/