CSS Dasar Dropdown

0
452

Saya kali ini menuliskan tutorial tentang cara membuat Dropdown sederhana menggunakan Html dan Css. Dropdown ini bisa digunakan pada menu pilihan atau text yang akan memberikan informasi. Hasilnya nanti apabila kita mengarahkan cursor ke text tertentu akan mucul text atau pilihan lagi. Berikut tutorialnya.

Step 1

Buatlah file index.html, lalu ketikkan sorce code seperti yang dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>CSS Dasar Dropdown</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h2>Dasar Dropdown</h2>
	<p>Arahkan Mouse pada tulisan "Disini"</p>
	<div class="dropdown">
		<span>Disini</span>
		<div class="dropdown-content">
    		<p>Hello World!</p>
		</div>
	</div>
</body>
</html>

 

Step 2

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  position: absolute;
  min-width: 90px;
  display: none;
  padding: 5px 16px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
  background-color: #ddd;
}
.dropdown:hover .dropdown-content {
  display: block;
}

 

Buatlah folder css, lalu buat file style.css didalam folder css tersebut.

Hasilnya nanti akan seperti ini.

Seperti itulah source code nya cara membuat dropdown sederhana. Sangat mudah tentunya bagi anda. Semoga tutorial ini bermanfaat dan menambah ilmu anda.

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here