Make a Simple CSS Dropdown Hover Technique. - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make a Simple CSS Dropdown Hover Technique., we have prepared well for this article you read and download the information therein. hopefully fill posts Article Aplikasi, Article CSS3, Article Resource, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make a Simple CSS Dropdown Hover Technique.
link : Make a Simple CSS Dropdown Hover Technique.

Make a Simple CSS Dropdown Hover Technique.

Melanjutkan tema postingan sebelumnya mengenai bumpy lists for full style lists content. Jadi artikel sekarang masih berkutat seputar klik srot merosot :P Ada yang bilang dropdown dan ada pula yang berkata select box! Kalau dilihat-lihat berbeda namun ada kemiripan dalam fungsinya? Satu yg pasti tetap srot merosot bro =)) Sekarang AA Koben akan berbagi tutorial bagaimana cara membuat CSS dropdown with hover. Jadi ketika melakukan sorot, akan merosotlah konten...tidak perlu repot-repot ;))

.dropdown {
z-index: 1000;
position: relative;
margin: auto;
width: 250px;
border-radius: 3px;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .selection {
position: relative;
cursor: pointer;
background-color: #F1F1F1;
color: #737373;
padding: 10px;
z-index: 100;
border-radius: 3px;
margin-top: 20px;
}
.dropdown .selection:after {
position: absolute;
content: '';
top: 50%;
right: 8px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 8px solid transparent;
border-bottom: 0;
border-top: 8px solid #737373;
width: 0;
}
.dropdown .options {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
top: 100%;
min-width: 100%;
background-color: #FFF;
height: 0;
overflow: hidden;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown .options div {
padding: 0 10px;
cursor: pointer;
line-height: 1.5;
}
.dropdown .options div:hover {
background-color: #F1F1F1;
color: #333;
-webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 1);
}
.dropdown:hover .options {
height: auto;
padding: 10px 0;
}
.dropdown:hover .selection {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dropdown:hover .selection:after {
border: 8px solid transparent;
border-top: 0;
border-bottom: 8px solid #737373;
}

<div class="dropdown">
<div class="selection">Selected</div>
<div class="options">
<div>List 1</div>
<div>List 2</div>
<div>List 3</div>
<div>List 4</div>
<div>List 5</div>
<div>List 6</div>
<div>List 7</div>
<div>List 8</div>
<div>List 9</div>
</div>
</div>

DEMO: codepen.io/beben-koben/full/xVooVq/

Ada satu lagi yang unik dan simpel, namun ada persamaan. A Pen By Kriszta talk about Card fold down effect with dynamic height. Jika sobat berminat, AA sudah meminimalisir kode yg ada tanpa mengurangi gaya full.

.task {
width: 50%;
min-width: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
cursor: pointer;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.abstract,.details {
width: 100%;
color: #282828;
padding: 1px 20px;
position: relative;
background: #fafafa;
}
.task:hover .abstract, .task:hover .details {
background: #fafafa;
}
.abstract {
-webkit-transition: .3s ease all;
transition: .3s ease all;
}
.details {
max-height: 0;
padding: 0;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotateX (-180deg);
transform: rotateX (-180deg);
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: .3s transform ease;
transition: .3s transform ease;
}
.details:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: grey;
}
.task:hover .details {
max-height: none;
overflow: visible;
visibility: visible;
-webkit-transform: rotateX (0deg);
transform: rotateX (0deg);
}
.details__inner {
padding: 1px 20px;
}

<div class="wrap">
<div class="task">
<div class="abstract">
<h3>TITLE</h3>
<p>This is sub TITLE.</p>
</div>
<div class="details">
<div class="details__inner">
<h3>When HOver</h3>
<p>This additional content when hover.</p>
</div>
</div>
</div>
</div>

Dah begitu saja ya!

BONUS:
CSS only Select - Dropdown Menu Animation - Select Box with Placeholder [CSS Only] - Facebook Reactions (Mother's day sneak peak) - Distorted Button Effects with SVG Filters - Masking in the Browser with CSS and SVG - Making a scroll-dependent menu bar with CSS3 and JavaScript - Animated Transition Effects - CSS Dropdowns - How TO - Hoverable Dropdown - It's Drop Down but It's Select Box too Use CSS

Thus articles Make a Simple CSS Dropdown Hover Technique.

that is all articles Make a Simple CSS Dropdown Hover Technique. This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make a Simple CSS Dropdown Hover Technique. with the link address https://autopostingblogspot.blogspot.com/2016/05/make-simple-css-dropdown-hover-technique.html