Cara Membuat Dropdown Dengan Javascript - Kursus Web Design Private Online 1 on 1‎

Hallo sahabat Dumetschool, semoga sehat selalu dan tetap semangat yaaa. Pada kesempatan kali ini saya akan membagikan tutorial tentang Cara membuat dropdown dengan Javascript, menu dropdown merupakan submenu utama yang tidak ditampilkan dengan tujuan agar terlihat rapi pada tampilan website. Dalam kasus ini saya akan membuat sebuah tombol dimana saat di klik submenu akan langsung muncul.Baiklah supaya tidak penasaran lagi mari ikutin langkah pembuatannya seperti berikut:

Langkah yang pertama sahabat siapkan terlebih dahulu struktur HTML nya,dan lihat script dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat Tombol Menu Dropdown Dengan Javascript</title>
</head>
<body>
	<div class="box">
		<span>Menu Dropdown</span>
		<ul class="active">
			<li><a href="">Menu I</a></li>
			<li><a href="">Menu II</a></li>
			<li><a href="">Menu III</a></li>
			<li><a href="">Menu IV</a></li>
			<li><a href="">Menu V</a></li>
		</ul>
	</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Tombol Menu Dropdown Dengan Javascript</title>

</head>

<body>

<span>Menu Dropdown</span>

</ul>

</div>

</body>

</html>

Langkah yang kedua ketikan untuk Style CSS berikut ini

<style>
		body{
			margin:0;
			padding:0;
			font-family: sans-serif;
		}
		.box{
			position: absolute;
			top:25%;
			left:50%;
			transform: translate(-50%, -50%);
		}
		span{
			padding:10px;
			position: relative;
			width: 250px;
			height: 80px;
			font-size: 24px;
			background: #3BF2C8;
			color: #FFFFFF;
			border: none;
			box-shadow: none;
			outline: none;
			cursor: pointer;
		}
		ul{
			position: absolute;
			margin:10px 0;
			padding: 0;
			width: 100%;
			background: #DFFD01;
			transform-origin: top;
			transform:perspective(1000px) rotateX(-90deg);
			transition: 0.5s;
		}
		ul.klik{
			transform:perspective(1000px) rotateX(0deg);			
		}
		ul li{
			list-style: none;
		}
		ul li a{
			display: block;
			padding: 10px;
			text-align: center;
			text-decoration: none;
			background: #FC3497;
			color:#FFFFFF;
			border-bottom: 1px solid rgba(0,0,0,.3);
		}
		ul li a:hover{
			background: #3A26F0;
		}
	</style>

<style>

body{

margin:0;

padding:0;

font-family: sans-serif;

}

.box{

position: absolute;

top:25%;

left:50%;

transform: translate(-50%, -50%);

}

span{

padding:10px;

position: relative;

width: 250px;

height: 80px;

font-size: 24px;

background: #3BF2C8;

color: #FFFFFF;

border: none;

box-shadow: none;

outline: none;

cursor: pointer;

}

ul{

position: absolute;

margin:10px 0;

padding: 0;

width: 100%;

background: #DFFD01;

transform-origin: top;

transform:perspective(1000px) rotateX(-90deg);

transition: 0.5s;

}

ul.klik{

transform:perspective(1000px) rotateX(0deg);

}

ul li{

list-style: none;

}

ul li a{

display: block;

padding: 10px;

text-align: center;

text-decoration: none;

background: #FC3497;

color:#FFFFFF;

border-bottom: 1px solid rgba(0,0,0,.3);

}

ul li a:hover{

background: #3A26F0;

}

</style>

Langkah selanjutnya perhatikan script dibawah berikut

Untuk script diatas saya menggunakan link JQuery CDN yang bisa dicopy disini, dan script selanjutnya digunakan untuk fungsi klik pada tag span serta class baru (sebuah toggle) klik untuk sebuah element html ul.

Jadi jika sudah selesai mengetikan script diatas ,berikut hasil tampilanya :

Demikian tutorial tentang Cara membuat dropdown dengan Javascript, semoga bermanfaat dan selamat mencoba.

terima kasih

Facebook DUMET School

Categories