CSS Menu Dropdown

0
100

Kesempatan kali ini ada tutorial tentang cara membuat Menu Dropdown menggunakan Html dan Css. Ada juga sedikit penjelasan tentang dropdown di CSS Dasar Dropdown. Nah kali ini tutorial Menu Dropdown sederhana. 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>Menu Dropdown</h2>
	<p>Arahkan Mouse pada tombol di bawah ini</p>
	<div class="dropdown">
		<button class="btnDropdown">Menu</button>
		<div class="dropdown-content">
    		<ul>
    			<li><a href="#">Link 1</a></li>
    			<li><a href="#">Link 2</a></li>
    			<li><a href="#">Link 3</a></li>
    			<li><a href="#">Link 4</a></li>
    		</ul>
		</div>
	</div>
</body>
</html>

 

Step 2

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

.dropdown {
  position: relative;
  display: inline-block;
}
.btnDropdown {
  padding: 12px 16px;
  background-color: #33c1d4;
  outline: none;
  font-family: arial;
  font-size: 16px;
  color: #fff;
  border: solid 1px #33c1d4;
  cursor: pointer;
}
.btnDropdown:hover {
  background-color: #1b92a1;
  border: solid 1px #1b92a1;
}
.dropdown-content {
  position: absolute;
  min-width: 90px;
  display: none;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
  background-color: #ddd;
}
.dropdown-content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.dropdown-content li a {
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  color: #333;
}
.dropdown-content li a:hover {
  background-color: #bbb;
}
.dropdown:hover .dropdown-content {
  display: block;
}

 

Maka tampilannya nanti akan seperti ini.

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

Terima kasih Telah Membaca

Baca Juga : CSS Dasar Dropdown

***PIU***

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here