cara membuat menu dropdown CSS sederhana

share

cara membuat menu dropdown CSS sederhana cara membuat menu dropdown CSS sederhana cara membuat menu dropdown CSS sederhana cara membuat menu dropdown CSS sederhana cara membuat menu dropdown CSS sederhana
  • cara membuat menu dropdown CSS sederhana

    Cara Membuat Menu Dropdown CSS Sederhana


    Tutorial cara membuat menu dropdown css sederhana atau navigasi vertikal dan horizontal yang menarik dengan style lengkap serta dapat download script source code css html.
  • cara membuat menu dropdown CSS sederhana
    Service
    1. Complete Website
    2. Only web script
    3. Web modification
    4. Application program
    5. Free web template
    6. Free application
    7. Basic SEO
    8. Article request
    9. Tutorial programing
  • cara membuat menu dropdown CSS sederhana
    MOTO
    "Kepuasan Pelanggan adalah Prioritas kami, Sebagai Pemicu Semangat Dalam Memberikan Pelayanan Terbaik".
  • cara membuat menu dropdown CSS sederhana Teknologi dan Bahasa
    PHP-5, HTML-5, CSS3, SQL Server, MySQL Database, Access Database, Java, JavaScript, dan Visual Basic.
  • cara membuat menu dropdown CSS sederhana
    VISI
    "Menjadi penyedia layanan yang terpercaya dan maju dalam dunia Teknologi Informasi."

Cara Membuat Menu Dropdown CSS Sederhana

Pada kesempatan baik ini kami akan memberikan sebuah tutorial tentang bagaimana cara membuat menu dropdown CSS sederhana, membuat suatu tampilan menu navigasi vertikal ataupun horisontal yang penuh dengan style tanpa menggunakan JavaScript / jQuery, cukup dengan HTML dan CSS. Contoh menu dropdown sederhana dapat Anda lihat pada menu navigasi website ini, terdiri dari satu submenu saja, namun dalam tutorialnya Anda dapat menambahkan submenu sesuka hati Anda.

Tutorial cara membuat menu dropdown CSS sederhana dilengkapi dengan contoh kode menu css, kami lakukan pada sistem operasi Windows 7, menggunakan web server XAMPP ver 5.6.3, dan web browser Mozilla Firefox . Untuk mengikuti tutorial ini pastikan Anda telah memahami pengertian CSS dan apa itu CSS.

DropDown Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain

cara membuat menu dropdown CSS sederhana

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

Cara Membuat Menu Dropdown CSS Sederhana

1. Bentuk menu navigasi berikut submenu yang akan kita jadikan sebagai menu dropdown css. Simpan sebagai index.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>

Bagaimana hasil dari kode html di atas jika kita run di web browser? Yup, akan tampil seperti pada gambar dibawah ini;

cara membuat menu dropdown CSS sederhana
cara membuat menu dropdown CSS sederhana

Oops! ternyata tampilannya belum memiliki style seperti yang diharapkan. Ya, karena memang style css belum kita buat, perhatikan script pada baris-6, disana kita membutuhkan file script css.

2. Buat file baru dan simpan sebagai "style.css", dalam file tersebut ketik 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 diatas, pastikan file index.html dan style.css tersebut tersimpan dalam satu directory folder yang sama. Kemudian jalankan file index.html, lihat apa yang terjadi, seharusnya akan tampil seperti pada gambar di bawah ini;

cara membuat menu dropdown CSS sederhana

Tutorial Cara Membuat Menu Dropdown CSS Sederhana

Download Script CSS Dropdown


Menu Dropdown CSS

3. Selesai.

Sekian penjelasan dari kami tentang tutorial bagaimana cara membuat menu dropdown CSS sederhana, lengkap dengan kode menu dropdown css. Untuk mendapatkan source code nya Anda dapat langsung klik download melalui link di atas, jika link download tidak aktif atau error mohon hubungi kami melalui SMS atau email atau melalui form komentar dan obrolan. Semoga dapat membantu.

Baca juga :


Cara Membuat Menu Dropdown CSS Sederhana

Tags: menu dropdown CSS sederhana, menu dropdown CSS, membuat menu dropdown, menu dropdown, cara membuat menu dropdown CSS sederhana


Reliable

cara membuat menu dropdown CSS sederhana

Advertise

jasa pasang iklan murah

Payment & Donation

cara membuat menu dropdown CSS sederhana

Rekening BCA : 343 1156 006

a/n : Andi Hatmoko

Rekening MANDIRI : 13300 11921 079

a/n : Andi Hatmoko

cara membuat menu dropdown CSS sederhana

Account :

andihatmoko@gmail.com

Live Chat

saya ertin2021-09-28, 15:07 pm
apakah saya bisa hosting yang data siswa
H tolal2021-09-25, 02:52 am
Mau melihat ktp
Indra2021-09-20, 14:39 pm
selamat siang, sy mau coba utk bikin startup peminjaman barang, apakah bisa di setup lokal server ?harga brp?ada limiter
Dimas Nurcah2021-09-16, 11:38 am
cara menampilkan ip versi 6 nya itu gimana min? saya coba scriptnya malah _ _ 1 _ Mohon sekali bantuannya min
dedi2021-09-11, 13:06 pm
sandi login untuk aplikasi absensi mas apa ya
Budi2021-09-09, 15:49 pm
Maaf ingin bertanya, harga untuk aplikasi sarpras dan simpeg berapa ya masing_ masingnya
SURATNO2021-09-03, 13:47 pm
saya ingin bikin aplikasi data rt rw apakah bisa di bantu
BUKHORI2021-08-23, 00:36 am
mohon info harga aplikasi input data anggota?
MIchaek Stan2021-08-14, 15:53 pm
Saya mau buat system laporan keuangan dan web info soal bisnis saya? apa bisa bantu _ WA 081575556888
Bagas2021-08-12, 14:04 pm
Bagaimana saya bisa mendownload aplikasi E_ Skripsi
SAFIUDDIN2021-07-30, 10:46 am
saya butuh aplikasi santri
Bambang2021-07-29, 14:18 pm
Bisa di ganti namanya tidak ya mis Gudang backup arsip sat
Nirwan2021-07-29, 10:23 am
Program Aplikasi HRD Berbasis Web, berapa bos
Ghossani2021-07-23, 15:26 pm
Info harga Aplikasi Manajemen Anggota
Hanafi2021-07-22, 00:50 am
untuk website sekolah berapa
Bambang W 2021-06-30, 10:31 am
Untuk aplikasi stock barang, bisakah ada tambahan fitur multi gudang, dan kira kira berapakah harganya?
Warta2021-06-18, 00:24 am
Untuk biaya pembuatan aplikasi berbasis web untuk arsip berapa yah fee nya ?
ellll2021-06-15, 10:51 am
program aplikasi pembuatan ektp harganya berapaan ?
parlin2021-06-11, 14:42 pm
berapa harga dan bisa gk di ganti menu sesui dengan kebutuhan untuk aplikasi data pegawai
Retno2021-06-04, 15:13 pm
utk aplikasi arsip dokumen kantor, harganya brp ya pak?
NOFAL2021-06-02, 20:57 pm
hallo, untuk aplikasi penjualan retail brp harganya? ini sistem bisnisnya source code di ksh atau cloud?
Ezi Fitriana2021-05-26, 21:42 pm
mohon info biaya buat aplikasi sistem informasi dan pelayanan online buat Kantor Desa
arif2021-05-26, 04:33 am
Gan aplikasi hrd harga brp?
Sayuti2021-05-25, 15:06 pm
Mau tanya klo Biaya buat Aplikasi Penilaian Kinerja Atau SKP brp ya?
Farah Ghaida2021-05-20, 15:13 pm
maaf pa sy mau tanya biaya pembuatan aplikasi data kepegawaian
Rachma2021-05-08, 19:26 pm
Untuk program aplikasi arsip dokumen biayanya berapa ya? dan apakah ada pembatasan maksimal berapa kb per dokumen?
zainuddin2021-05-02, 08:07 am
mohon informasi harga cuti online
zulkifli2021-04-25, 22:45 pm
brapa harganya aplikasi data ke anggotaan sederhana yang bisa lampirkan foto dan di print
irvan2021-04-14, 11:00 am
saya ingin membeIi untuk instansi pemerintah saya, bagaimana pembeIiannya ya
Sahlani2021-03-25, 19:33 pm
Saya mau pesan absensi karyawan berbasis web yang sederhana_
Shany2021-03-19, 08:59 am
saya ingin coba demo yang aplikasi inventory berbasis web, harganya berapa ya
fahmi2021-03-16, 02:16 am
Berapa ya harga aplikasi perjalanan dinas ini?
dela2021-03-10, 10:23 am
ka untuk pembelian aplikasi manajemen anggota berapa budgetnya? dan mendapatkan source codenya tidak ya?
isna2021-02-26, 23:59 pm
saya minat Aplikasi pengajuan judul skripsi online bang_
Jagad2021-01-22, 20:44 pm
Aplikasi nya mantap gan, yang arsip digital_ source code sangat terstruktur dan berkarakter, jadi mudah dipelajari_ Thx
regista2021-01-20, 10:45 am
Hallo kak info saya ingin download aplikasi rental barang kak

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
cara membuat menu dropdown CSS sederhana