Membuat menu dropdown dengan HTML dan CSS

Pada kesempatan kali ini kita akan mencoba membahas dan membuat menu dropdown menggunakan HTML dan CSS, tentunya sudah tidak asing lagi di mata kita ketika kita mengunjungi sebuah situs web dan di situs web tersebut terdapat menu dropdownnya , bahkan bisa di bilang sebagian besar halaman situs web menggunakan menu dropdown pada saat ini

Menu dropdown selain mempercantik penampilan juga bisa sebagai penglompokan penglompokan menu misalnya pada menu jurusan muncul beberapa pilihan ke bawah seperti RPL , TKJ , MM dll

Agar tampilan situs website kita tidak kalah dengan tampilan situs web yang lain yang sudah menggunakan fasilitas menu dropdown mari kita pelajari seperti apa sih cara membuat menu dropdown itu

 

Langkah awal yang harus kita lakukan adalah membuat file css terlebih dahulu , buat file css seperti script berikut dan simpan dengan nama style.css

body {
	background:#999999;
	font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
	margin: 100px auto; 
	text-align: center;
}

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}


nav ul {
	background:#0099FF; 
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
		float: left;
	}
		nav ul li:hover {
			background:#0066FF;
		}
			nav ul li:hover a {
				color: #fff;
			}
		
		nav ul li a {
			display: block; padding: 25px 40px;
			color: #fff; text-decoration: none;
		}
			
		
	nav ul ul {
		background:#0099FF; border-radius: 0px; padding: 0;
		position: absolute; top: 100td_persen;
	}
		nav ul ul li {
			float: none; 
			border-top: 1px solid #0099FF;
			border-bottom: 1px solid #0099FF; position: relative;
		}
			nav ul ul li a {
				padding: 15px 40px;
				color: #fff;
			}	
				nav ul ul li a:hover {
					background:#0066FF;
				}
		
	nav ul ul ul {
		position: absolute; left: 100td_persen; top:0;
	}
		

Setelah membuat file css seperti di atas , langkah kedua yang harus kita lakukan adalah membuat file Html untuk memanggil script css , buat file html dan simpan dengan nama index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Belajar HTML dan CSS</title>

<link href="style.css" rel="stylesheet" />

</head>
<body>

<nav>
	<ul>
		<li><a href="#">Beranda</a></li>
		<li><a href="#">Tutorial</a>
			<ul>
				<li><a href="#">PHP</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">HTML</a>
					<ul>
						<li><a href="#">HTML1</a></li>
						<li><a href="#">HTML2</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Skrip</a>
			<ul>
				<li><a href="#">Coding HTML</a></li>
				<li><a href="#">Coding CSS</a></li>
			</ul>
		</li>
		<li><a href="#">Tentang</a>
		    <ul>
						<li><a href="#">Profile</a></li>
						<li><a href="#">Kontak</a></li>
					</ul>
				</li>
	</ul>
</nav>

</body>
</html> 

Setelah itu simpan dan jalankan file index.html

Jika berhasil maka akan tampil menu dropdown seperti gambar berikut :

Mudah - mudahan tutorial singkat ini dapat bermanfaat bagi pembaca sekalian. Support kami dengan cara Click LIKE atau SHARE
jika anda merasa tutorial ini bermanfaat bagi pembaca sekalian.

 

Salam Kreatif


Komentar pembaca

PenyalahgunaanTerima kasih atas infonya, temukan juga tutorial lainnya mengenai programming di http://xpanel.uhostall.com/blog/ Sampai Jumpa...posting pada :2015-09-04 10:33:11
         
     
         
 
         
   
         
   
 

Tulis komentar