Site icon Pesona Informatika

Belajar CSS (23. Dropdown)

Akhi Syabab

Diskripsi: Dropdwon adalah list yang muncul saat kita mengarahkan kursor ke salah satu menu.
kita tapat menggunakan contoh tag span atau button untuk menu nya dan tag div sebagai container list dropdown.

Pada pembuatan dropdown kita membutuhkan class .dropdown dan dropdown-content. Agar lebih memahami, perhatikan dan pelajari contoh dibawah
ex.

<!DOCTYPE html>
<html>
<head>
	<title>belajar dropdown</title>
	<style>
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			overflow: hidden;
			background-color: blue;
		}
		li {
			float: left;
		}
		li a, .dropbtn {
			display: inline-block;
			color: white;
			text-align: center;
			padding: 14px 16px;
			text-decoration: none;
		}
		li a:hover, .dropdown:hover .dropbtn{
			background-color: #111;
		}
		.dropdown {
			display: inline-block;
		}
		.dropdown-content {
			display: none; 
			position: absolute;
			background-color: red;
			min-width: 150px;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
		}
		.dropdown-content a {
			color: white;
			padding: 12px 16px;
			text-decoration: underline;
			display: block;
		}
		.dropdown-content a:hover {
			background-color: #f1f1f1;
		}
		.dropdown:hover .dropdown-content {
			display: block;
		}
	</style>
</head>
<body>	
	<h1>Belajar Dropdwn</h1>
	<p>arahkan kursor untuk melihat hasil pembuatan dropdown</p>
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<div class="dropdown">
			<a href="#" class="dropbtn">Dropdown</a>
			<div class="dropdown-content">
				<a href="#">list1</a>
				<a href="#">list2</a>
				<a href="#">list3</a>
			</div>
		</div>
	</ul>
</body>
</html>

Semoga bermanfaat, sampai jumpa dipostingan selanjutnya.

Exit mobile version