◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XMake Full Stylish Dropdown use jQuery
Membuat dropdown keren dengan jquery script. Area drop-down didalam area konten, scrolling lists.
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE