CARA MEMBUAT DROPDOWN MENGGUNAKAN HTML DAN CSS
CARA MEMBUAT DROPDOWN
MENGGUNAKAN HTML DAN CSS
Hallo gais apa kalian kesusaahan dalam membuat deropdown atau kalian masih awam dan pengen membuat suatu website sendiri nah di kesempatan kali ini saya akan memberikan tutor ke kalian bagai mana cara membuat dropdown di HTML dan CSS nah di sini saya akan menjelaskan singkat mengenai apa itu html dan css oke langsung aja kita ke materinya!.....
-Apa Itu HTML
Html atau kepanjanga dari Hypertext Markup Language adalah bahasa markup basic (standar), untuk Document yang dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets dan bahasa scripting seperti JavaScript dan VBScript.
bahasa html juga biasa di combinasikan dengan bahasa php untuk membuat website dinamis.
-Apa Itu CSS
CSS atau juga di sebut dengan Cascading Style Sheet yang saya sudah sebut di atas singkat mengenai html, css atau (Cascading Style Sheet) merupakan aturan untuk mengatur beberapa komponen dalam website web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa perogram. CSS biasanya di gunakan untuk memcatik tampilan website kalian agar web kalian menarik untuk di lihat, dan sudah di jelaskan di atas tadi.
Oke langsung aja kita mulai tutor cara membuat Dropdown
ini adalah pada saat saya mulai mencoding membuat dropwonnya:
Pertama tama langkalian harus lakukan iyalah
1. buka text code kalian
2. buat new projek atau new file
3. save dengan nama index.html atau seterahlaian yang penting dengan format ( .html ).
4. setelah itu copy dan paste code di bawah ini di new projek / file kalian yang telah kalian buat.
Untuk code bisa lihat di bawah ini:
code html dan css
<!DOCTYPE html>
<html>
<head>
<title>membuat dropdown</title>
<style type="text/css">
.btn {
background: blue;
border-radius: 5px;
border: 1px solid white;
width: 100px;
height: 40px;
color: white;
font-size: 12px;
text-transform: capitalize;
transition-duration: 0.6s;
}
.btn:hover {
background: #1E90FF;
color: whitesmoke;
}
.btn > ul {
position: absolute;
list-style-type: none;
background: whitesmoke;
border: none;
text-align: center;
width: 85px;
height: 0;
padding: 0px 0 0px;
transition-duration: 0.6s
}
.btn:hover > ul {
height: 19%;
border: 2px solid gray;
padding: 7px 0 5px;
transition-duration: 0.4s;
}
.btn > ul > li {
line-height: 20px;
display: none;
}
.btn:hover > ul > li {
display: block;
}
.btnu > ul > li > a {
text-decoration: none;
color: black;
}
.menu1 {
color: gray;
width: 100%;
padding: 5px;
}
.drop-content {
position: absolute;
overflow: hidden;
left: 75px;
padding: 0;
background: whitesmoke;
list-style-type: none;
}
.menu1 > .drop-content {
height: 0;
transition-duration: 0.4s;
}
.menu1:hover > .drop-content {
height: 100px;
padding: 14px;
margin: -14px;
border: 2px solid black;
}
</style>
</head>
<body>
<button class="btn" type="button">dropdown
<ul>
<li><a href="https://arg1a.blogspot.com">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><span class="menu1">menu
<ul class="drop-content">
<li><a href="https://arg1a.blogspot.com">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul></span></li>
</ul>
</button>
</body>
</html>
<html>
<head>
<title>membuat dropdown</title>
<style type="text/css">
.btn {
background: blue;
border-radius: 5px;
border: 1px solid white;
width: 100px;
height: 40px;
color: white;
font-size: 12px;
text-transform: capitalize;
transition-duration: 0.6s;
}
.btn:hover {
background: #1E90FF;
color: whitesmoke;
}
.btn > ul {
position: absolute;
list-style-type: none;
background: whitesmoke;
border: none;
text-align: center;
width: 85px;
height: 0;
padding: 0px 0 0px;
transition-duration: 0.6s
}
.btn:hover > ul {
height: 19%;
border: 2px solid gray;
padding: 7px 0 5px;
transition-duration: 0.4s;
}
.btn > ul > li {
line-height: 20px;
display: none;
}
.btn:hover > ul > li {
display: block;
}
.btnu > ul > li > a {
text-decoration: none;
color: black;
}
.menu1 {
color: gray;
width: 100%;
padding: 5px;
}
.drop-content {
position: absolute;
overflow: hidden;
left: 75px;
padding: 0;
background: whitesmoke;
list-style-type: none;
}
.menu1 > .drop-content {
height: 0;
transition-duration: 0.4s;
}
.menu1:hover > .drop-content {
height: 100px;
padding: 14px;
margin: -14px;
border: 2px solid black;
}
</style>
</head>
<body>
<button class="btn" type="button">dropdown
<ul>
<li><a href="https://arg1a.blogspot.com">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><span class="menu1">menu
<ul class="drop-content">
<li><a href="https://arg1a.blogspot.com">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul></span></li>
</ul>
</button>
</body>
</html>
Sekian dari saya terimakasih dan jangan lupa beri ulasan mengenai materi ini ya
