Cara menggunakan buat menuhtml

Pada kesempatan yang baik ini kami akan memberikan tutorial cara membuat menu dropdown CSS sederhana, membuat menu navigasi vertikal atau horizontal yang penuh gaya tanpa menggunakan JavaScript / jQuery, cukup HTML dan CSS. Contoh dropdown menu sederhana bisa anda lihat pada menu navigasi website ini yang hanya terdiri dari satu submenu, namun pada tutorialnya anda bisa menambahkan submenu sesuka anda

Table of Contents Show

Cara Membuat Menu Dropdown CSS Sederhana
Tutorial Cara Membuat Menu Dropdown CSS Sederhana
Cara Membuat Menu Dropdown CSS Sederhana

Tutorial cara membuat dropdown menu css sederhana dilengkapi dengan contoh kode menu css, kami melakukannya di sistem operasi windows 7, menggunakan web server xampp ver 5. 6. 3, dan browser web Mozilla Firefox. Untuk mengikuti tutorial ini pastikan anda memahami pengertian CSS dan apa itu CSS

DropDown Menu atau Menu Dropdown adalah menu yang berisi sekumpulan link yang ditampilkan ke bawah jika menu tersebut diklik dan menu tersebut berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri maupun dari web lain

Berikut langkah-langkah atau tutorial cara membuat menu dropdown CSS sederhana, lengkap dengan contoh kode menu css

1. Bentuk submenu menu navigasi berikut yang akan kita jadikan sebagai menu dropdown css. Simpan sebagai indeks. html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Membuat Menu Dropdown CSS</title>
		<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	</head>
	<body>
		<div class="menu-wrap">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">Tentang Kami</a></li>
				<li><a href="#">Produk</a>
					<ul>
						<li><a href="#">Interior</a></li>
						<li><a href="#">Eksterior</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

Apa hasil dari kode html diatas jika kita jalankan di web browser?

cara membuat menu dropdown css sederhana

Ups. ternyata tampilannya tidak memiliki gaya seperti yang diharapkan. Ya karena kita belum membuat style css, perhatikan script pada baris ke-6, disitu kita membutuhkan file script css

2. Buat file baru dan simpan sebagai "style. css", dalam file tersebut ketikkan kode css berikut

* {margin:0; padding:0;}
 
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
 
.menu-wrap {
background-color:#FFA800; 
height:40px; 
line-height:40px; 
position:relative;
width:720px;
margin:auto;
margin-top:20px;
}
 
.menu-wrap ul {
list-style:none;
}
 
.menu-wrap ul li a {
float:left; 
width:150px; 
display:block; 
text-align:center; 
color:#FFF; 
text-decoration:none; 
}
 
.menu-wrap ul li a:hover {
background-color:#666; 
display:block;
}
 
.menu-wrap ul li:hover ul {
display:block;
}
 
.menu-wrap ul ul {
display:none; 
list-style:none; 
position:absolute; 
background-color:#FFA800;
left:300px; 
top:40px; 
width:190px;
}
 
.menu-wrap ul ul li a {
float:none; 
display:block; 
padding-left:30px; 
text-align:left; 
width:160px;
}
 
.menu-wrap ul ul li a:hover {
color:#fff;
}

Setelah selesai membuat kode menu dropdown css di atas, pastikan file index. html dan gaya. css disimpan di direktori folder yang sama. Kemudian jalankan file indeks. html, lihat apa yang terjadi, seharusnya muncul seperti pada gambar di bawah ini;

Unduh Script CSS Dropdown

Menu tarik-turun CSS

3. Selesai

Berikut penjelasan dari kami tentang tutorial cara membuat dropdown menu CSS sederhana, lengkap dengan kode menu dropdown css. Untuk mendapatkan source code bisa langsung klik download melalui link diatas, jika link download tidak aktif atau error silahkan hubungi kami melalui sms atau email atau melalui form komentar dan chat. Semoga membantu