Make Full Stylish Dropdown use jQuery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Full Stylish Dropdown use jQuery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article HTML, Article jQuery, Article Snippet, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Full Stylish Dropdown use jQuery
link : Make Full Stylish Dropdown use jQuery

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/

Thus articles Make Full Stylish Dropdown use jQuery

that is all articles Make Full Stylish Dropdown use jQuery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Full Stylish Dropdown use jQuery with the link address https://autopostingblogspot.blogspot.com/2014/03/make-full-stylish-dropdown-use-jquery.html