Membuat Dropdown Menu Menarik Dengan Menggunakan CSS
Di panduan kali ini kamu akan belajar bagaimana merancang dropdown fitur menarik dengan menggunakan css.
Hallo semuanya kali ini saya akan membahas mengenai drop down fitur bagaimana merancang dropdown fitur menarik dengan menggunakan css, menarik di sini yaitu dikala kita hover fitur tersebut karenanya sub fitur berikutnya akan muncul dengan cara yang sangant lembut atau smooth 🙂
lalu bagaimana cara membuatnya ? so check this out
pertama-tama tama kita mesti merancang struktur HTMLnya terlebih dahulu :
<html>
<head>
<title>Smooth drop down fitur</title>
</head>
<body>
<fitur>
<ul class=primary>
<li><a href=#>home</a></li>
<li><a href=#>galery</a>
<ul class=sub1>
<li><a href=#>sub 1</a></li>
<li><a href=#>sub 1</a></li>
<li><a href=#>sub 1</a></li>
</ul>
</li>
<li><a href=#>contact us</a></li>
<li><a href=#>about</a></li>
</ul>
</fitur>
</body>
</html>
setelah kita salin HTML nya , karenanya langkah berikutnya baru kita percantik dengan CSS, dan berikut yaitu CSSnya :
fitur{
width:600px;
background:deeppink;
margin:auto;
height:50px;
}
.primary li {
float:left;
list-style:none;
width:25%;
line-height:50px;
position: relative;
}
.primary li a{
text-decoration:none;
color:#fff;
}
.sub1{
background: #3399FF;
width: 130px;
padding-left: 0px;
opacity: 0;
position: absolute;
left: -28px;
}
.sub1 li {
width: 100%;
text-align: center;
height: 0px;
}
.sub1 li a {
color: #fff
}
.primary li:hover .sub1{
opacity: 1;
}
fitur ul li:hover ul li {
height:25px;
line-height: 25px
}
.sub1 {
transition:all 1s;
}
.sub1 li {
transition:height 0.5s;
}
oke setelah semuanya di salin coba kalian pahami terlebih dahulu struktur HTML dan CSS nya agar kalian paham dan dapat mengembangkanya lebih bagus lagi.
dan hasilnya akan seperti demo di bawah ini :
oke teman-teman seperti itulah tadi panduan singkat namun bermanfaat untuk kalian yang ingin merancang fitur dropdown cantik tentangbagaimana merancang dropdown fitur menarik dengan menggunakan css.
Sumber https://kursuswebsite.org
