Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Membuat Dropdown menu dengan CSS3 Animation
Di internet sekarang ini banyak sekali beredar plugin atau pun library untuk membuat dropdown menu, mulai dari yang simpel ampe yang ribet banget. Nah kali ini saya akan share cara membuat dropdown menu hanya dengan CSS3, moga aja sesuai dengan selera kalian atau paling tidak bisa menambah pengetahuan kalian
Preview: <a href='https://plus.google.com/107704214034239413877/posts/D4uYQqcpQs9'>https://plus.google.com/107704214034239413877/posts/D4uYQqcpQs9</a>
Ok....kita mulai dengan struktur HTML jangan lupa link font-awesome di bagian head (optional) gk ada yang spesial dari kode berikut, hanya kode dasar biasa
<nav>
<ul>
<li class="off-1">Fruits
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<ul class="drop-menu menu-1">
<li>Apple</li>
<li>Orange</li>
<li>Mango</li>
<li>Papaya</li>
</ul>
</li>
<li>Vegie
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<ul class="drop-menu menu-2">
<li>Carrot</li>
<li>Broccoli</li>
<li>Lettuce</li>
<li>Cabbage</li>
</ul>
</li>
<li>Spices
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<ul class="drop-menu menu-3">
<li>Nutmeg</li>
<li>Pepper</li>
<li>Onion</li>
<li>Garlic</li>
</ul>
</li>
<li>Herbs
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
<ul class="drop-menu menu-4">
<li>Basil</li>
<li>Fennel</li>
<li>Chives</li>
<li>Mints</li>
</ul>
</li>
</ul>
</nav>
OK....kita lanjut ke bagian asiknya, yaitu CSS disini saya menganggap kalian sudah paham dengan CSS dasar dan familiar dengan beberapa CSS Pseudo Class
nav {
padding: 50px;
text-align: center;
}
nav > ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
background: MediumSeaGreen;
-webkit-perspective: 1000px;
perspective: 1000px;
}
nav > ul > li {
float: left;
width: 150px;
height: 65px;
line-height: 65px;
position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
font-weight: bold;
color: #BBE4CD;
cursor: pointer;
border-right: solid thin SeaGreen;
}
nav > ul > li > i {
-webkit-transition: -webkit-transform 0.1s ease;
transition: -webkit-transform 0.1s ease;
transition: transform 0.1s ease;
transition: transform 0.1s ease, -webkit-transform 0.1s ease;
-webkit-transform-origin: center center;
transform-origin: center center;
}
nav > ul > li:hover {
background: SeaGreen;
color: Azure;
}
nav > ul > li:hover > i {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
nav > ul > li:hover > ul.drop-menu li {
display: block;
}
nav > ul > li:last-child {
border-right: none;
}
ul.drop-menu {
position: absolute;
top: 100%;
left: 0%;
width: 100%;
padding: 0;
}
ul.drop-menu li {
background: #666;
color: rgba(255, 255, 255, 0.7);
border-bottom: solid thin #595959;
display: none;
}
ul.drop-menu li:hover {
background: #595959;
}
ul.drop-menu li:last-child {
border-radius: 0px 0px 5px 5px;
border-bottom: none;
}
li:hover > ul.drop-menu.menu-1 {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover > ul.drop-menu.menu-1 li {
opacity: 0;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(1) {
-webkit-animation-name: menu-1;
animation-name: menu-1;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(2) {
-webkit-animation-name: menu-1;
animation-name: menu-1;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(3) {
-webkit-animation-name: menu-1;
animation-name: menu-1;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
li:hover > ul.drop-menu.menu-1 li:nth-child(4) {
-webkit-animation-name: menu-1;
animation-name: menu-1;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes menu-1 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) translateY(20px);
transform: rotateY(-90deg) translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateY(0);
transform: rotateY(0deg) translateY(0);
}
}
@keyframes menu-1 {
0% {
opacity: 0;
-webkit-transform: rotateY(-90deg) translateY(20px);
transform: rotateY(-90deg) translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: rotateY(0deg) translateY(0);
transform: rotateY(0deg) translateY(0);
}
}
li:hover > ul.drop-menu.menu-2 {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover > ul.drop-menu.menu-2 li {
opacity: 0;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(1) {
-webkit-animation-name: menu-2;
animation-name: menu-2;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 0;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(2) {
-webkit-animation-name: menu-2;
animation-name: menu-2;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 1;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(3) {
-webkit-animation-name: menu-2;
animation-name: menu-2;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 240ms;
animation-delay: 240ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 2;
}
li:hover > ul.drop-menu.menu-2 li:nth-child(4) {
-webkit-animation-name: menu-2;
animation-name: menu-2;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 360ms;
animation-delay: 360ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 3;
}
@-webkit-keyframes menu-2 {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
50% {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes menu-2 {
0% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
50% {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
li:hover > ul.drop-menu.menu-3 {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover > ul.drop-menu.menu-3 li {
opacity: 0;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(1) {
-webkit-animation-name: menu-3;
animation-name: menu-3;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 0;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(2) {
-webkit-animation-name: menu-3;
animation-name: menu-3;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 120ms;
animation-delay: 120ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 1;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(3) {
-webkit-animation-name: menu-3;
animation-name: menu-3;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 240ms;
animation-delay: 240ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 2;
}
li:hover > ul.drop-menu.menu-3 li:nth-child(4) {
-webkit-animation-name: menu-3;
animation-name: menu-3;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 360ms;
animation-delay: 360ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 3;
}
@-webkit-keyframes menu-3 {
0% {
opacity: 0;
-webkit-transform: skewX(-20deg) translateX(30px);
transform: skewX(-20deg) translateX(30px);
}
70% {
-webkit-transform: skewX(10deg) translateX(-10px);
transform: skewX(10deg) translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: skewX(0deg) translateX(0);
transform: skewX(0deg) translateX(0);
}
}
@keyframes menu-3 {
0% {
opacity: 0;
-webkit-transform: skewX(-20deg) translateX(30px);
transform: skewX(-20deg) translateX(30px);
}
70% {
-webkit-transform: skewX(10deg) translateX(-10px);
transform: skewX(10deg) translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: skewX(0deg) translateX(0);
transform: skewX(0deg) translateX(0);
}
}
li:hover > ul.drop-menu.menu-4 {
-webkit-perspective: 1000px;
perspective: 1000px;
}
li:hover > ul.drop-menu.menu-4 li {
opacity: 0;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(1) {
-webkit-animation-name: menu-4;
animation-name: menu-4;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 0ms;
animation-delay: 0ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 0;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(2) {
-webkit-animation-name: menu-4;
animation-name: menu-4;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 150ms;
animation-delay: 150ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 1;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(3) {
-webkit-animation-name: menu-4;
animation-name: menu-4;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 2;
}
li:hover > ul.drop-menu.menu-4 li:nth-child(4) {
-webkit-animation-name: menu-4;
animation-name: menu-4;
-webkit-animation-duration: 300ms;
animation-duration: 300ms;
-webkit-animation-delay: 450ms;
animation-delay: 450ms;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 3;
}
@-webkit-keyframes menu-4 {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
60% {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@keyframes menu-4 {
0% {
opacity: 0;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
60% {
-webkit-transform: rotateX(45deg);
transform: rotateX(45deg);
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
Ada beberapa yang ingin saya terangkan disini :last-child = Memilih setiap element yang terakhir dari induk :nth-child(n) = Memilih setiap element yang ke-n dari induk animation-fill-mode: forwards = Animasi berhenti di posisi akhir (defaultnya kembali ke posisi awal)
wow......banyak amat ya CSSnya santai gan,... sepadan kok ama hasilnya ;) disini hanya sebagian contoh, silahkan kalian kembangkan lagi sesuai dengan imajinasi dan selera masing-masing
source code bisa kalian lihat di link di bawah (disana saya pke SASS, jd kalian harus klik menu compile CSS )
sekian dulu tuk kali ini, kita lanjut dilain waktu dengan topik yang lebih menarik. Jika ada yang ditanyakan silahkan tulis komentar, jangan lupa klik coto jika kalian merasa tutorial ini bermanfaat
last but not lease,... Thanks, Relax and Keep Coding!
10 Jawaban:
Terima Kasih atas infonya ya, infonya sangat membantu
@DikyKurniawan13 sama2 gan mari belajar bersama dan saling berbagi
Semoga Apa yang di bagi bukan sekedar menjadi ilmu tapi juga menjadi amal bagi agan . amin
@Fariz21 berbagi tuk menambah ilmu gan :)
@asyhad mari belajar bersama gan
terimakasih dan sekalian bertanya .. mas ini dropdownnya agar bisa diatas thubnail bagaimana apa yg perlu dirubah css nya?