Home 
Blogs 
Contact 
Administration
share
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
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
code
source
<!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
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:
code
source
* {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;
Tutorial Cara Membuat MenuDropdown 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 :
Pengertian web statis dan web dinamis
Pengertian CSS dan apa itu CSS
Script PHP Update Database MySQL | CRUD
Script Tampil Database dengan PHP MySQL | VIEW Data
Cara Membuat Laporan PDF dengan PHP dan MySQL
Script PHP untuk Cari Data pada Database MySQL
Membuat Form dan Script Edit Data dengan PHP MySQL
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
Advertise
Archive
Cara Membuat Script Autonumber PHP MySQL
Script Kode Otomatis dengan PHP MySQL
Cara Membuat Form Input Tanggal PHP MySQL
Script PHP Upload File Gambar Image Foto
Script PHP Ganti Password MySQL | Tutorial
Script PHP Update Database MySQL | CRUD
Script Tampil Database dengan PHP MySQL | VIEW Data
Cara Membuat Laporan PDF dengan PHP dan MySQL
Cara Membuat Script Login Multiuser dengan PHP dan MySQL
Membuat Form Input Data dengan PHP dan MySQL
Script PHP untuk Cari Data pada Database MySQL
Membuat Form dan Script Edit Data dengan PHP MySQL
Membuat Widget Live Chat dengan PHP MySQL
Script PHP untuk Hapus Data pada Database MySQL
Cara Install Windows 7 Ultimate
Kumpulan Kode Warna HTML Lengkap
Cara Mencari Uang di Internet dengan Ziddu
Cara Membuat Desain Web Dua Kolom
Cara Menyimpan File di Google Drive
Cara Daftar GlobAllShare dan Dapatkan Saham GAS Tahun 2014
What is the definition of web hosting
Membuat form login dan logout dengan PHP dan MySQL
Pengertian Jaringan Komputer dan Klasifikasi nya
Cara membuat database dan table MySQL menggunakan phpmyadmin
Cara menjalankan aplikasi web-server XAMPP
Cara Merakit Komputer Sendiri dengan Benar
Troubleshooting hardware komputer atau PC
Mengenal Database MySQL Untuk Pemula
Mengenal Komponen Hardware Komputer dan Fungsinya
Belajar Membuat Website Sendiri di Localhost
Belajar Pemrograman HTML Tingkat Lanjutan
Payment & Donation
Rekening BCA : 343 1156 006
a/n : Andi Hatmoko
Rekening MANDIRI : 13300 11921 079
a/n : Andi Hatmoko
Account :
andihatmoko@gmail.com
Live Chat
zhivanne2020-08-26, 16:22 pm
terimakasih min_ v
Juned2020-08-23, 11:30 am
Gimana kalo make delete di mysqli nya??
putri2020-08-21, 08:51 am
Saya tertarik dengan aplikasi arsipnya_ HArganya berapa ya gan? Terima kasih
vitalis2020-08-19, 09:39 am
minta password rar rajasiswa dong
Mukhlis2020-08-18, 10:42 am
Aplikasi Indekx Kepuasan Masyarakat nya ada bg?
Tedi2020-08-15, 20:41 pm
Selamat malam para pakar
arif2020-08-13, 14:36 pm
Program Aplikasi Rental Online Untuk Halaman Member Depannya tidak ada hanya Halaman Login Untuk admin dan Super admin
Budi2020-08-11, 01:42 am
Berapa harga softwarenya
secret2020-08-10, 14:59 pm
ada free source code yang bgagus gak ?
Angela2020-08-06, 18:50 pm
Hallo, saya angela ingin bertanya apakah aplikasi surat berbasis web ini bisa disesuaikan dengan keadaan di kita_ _ _ hrg?
aan2020-08-05, 14:20 pm
kl mau mendapatkan sourcecode aplikasi SPPD gimana ya?? bisa minta wa nya
Budi2020-08-01, 13:37 pm
apakah aplikasih nya bisa di rubah dan ditambah kolomnya
SHODIKIN2020-07-26, 06:16 am
Berapa Donasi Program Aplikasi Penjualan Berbasis Web? Tq
MICHAEL ELSO2020-07-23, 18:34 pm
Apakah pembelian aplikasi ktp sudah termasuk datanya smua? Atau hanya aplikasinya saja? Misalnya mau untuk cek data bs?
April2020-07-21, 13:54 pm
saya ingin membuat aplikasi arsip digital untuk internal perusahaan yg dengan mudah dapat di akses bagi seluruh karyawan
Salwa2020-07-20, 13:07 pm
Berapa lama kira2 pesan aplikasi untuk perpustakaan sekolah?
udin2020-07-19, 21:44 pm
berapa harga aplikasi untuk pondok pesantren
isratul hadi2020-07-17, 23:57 pm
Mohon info harga Aplikasi Ini di tunggu di email sya ya_ _ _ _
Royke Lantup2020-07-17, 20:07 pm
Setelah di download langkah_ langkahnya seperti apa?
Feria2020-07-10, 16:50 pm
Untuk aplikasi penyimpanan berkas pengajuan administrasi capil, KK dan KTP berapa biaya nya ??
nugraha2020-07-10, 09:46 am
gan, cara dapat aplikasi simpeg7 gimana?
Adi2020-07-08, 19:25 pm
Kami instansi BUMN mau beli full aplikasi Arsip Surat Berbasis Web SIPAS_ Harganya berapa ya? Dan Caranya gimana ya?
kasmono2020-07-08, 15:09 pm
mas, minta link donlot untuk script kode otomatisnya_ trims
Asep Gunawan2020-07-08, 09:50 am
Mau tanya versi Full Aplikasi stok barang
Iwan2020-07-08, 09:40 am
Berapa harga Program Aplikasi Manajemen Anggota
ferry2020-06-24, 13:51 pm
apakah saya bisa mendapatkan aplikasi SPPD exel sederhana
adam2020-06-24, 11:02 am
apakah bisa mengirimkan biaya pembuatan aplikasi E_arsip_ terima kasih
Shany2020-06-19, 20:43 pm
Untuk aplikasi persediaan ini apakah masih bisa di customize dengan warna dan ukuran?
adi2020-06-17, 22:15 pm
Assalamualaikum WRWB
Triyanto2020-06-17, 15:02 pm
Halo admin,,,saya tertarik dengan aplikasi cutinya,,harganya berapa
fadhil2020-06-17, 09:53 am
bisakan anda mengirimkan penawaran ke email saya tentang program aplikasi e_ arsip dan data pegawai
jiching2020-06-12, 14:40 pm
Untuk mendownload script live chat bgmn?
aa2020-06-08, 11:11 am
brp harga untuk aplikasi Program Aplikasi Inventory Barang Gudang
Budhi Dwipa2020-06-08, 10:48 am
halo admin saya tertarik dengan aplikasi simpeg 7 apakah ada nomor wa yg bisa dihubungi ?
abu hafidz2020-06-04, 14:23 pm
kalau untuk menampilkan hanya data yang ada di table lain gimana ya ? mohon bantuannya
Muhlis2020-06-04, 12:09 pm
saya berminat software pengajuan judul skripsi, saya ingin membahas harganya jida chat ini di respon ke Email
nic2020-06-04, 07:49 am
brp harga e_ arsip
NUR CAHYANIG2020-06-03, 15:20 pm
Berapa harga untuk software koperasi?
Arif Mahmudi2020-06-03, 11:00 am
Assalamualaikum
nanda2020-05-24, 22:34 pm
ini car ameliat cht pada code nya gmnya?
mugiarto2020-05-09, 08:33 am
bgmana cara beli program iin, apakah termasuk souce code nya ??
Muhammad Zae2020-04-30, 10:14 am
Bagaimana cara membeli aplikasi ini?
willbertus2020-04-28, 16:49 pm
Admin mohon info utk Aplikasi Dokumen Kantor gimana cara dapatnya secara komplit_ Minat_ thks
Galih2020-04-27, 23:18 pm
Min, bagaimana cara mendapatkan source code aplikasi cuti?
ariel2020-04-18, 11:02 am
kami berminat dgn aplikasi SPPD berapa harga gan?
Aris2020-04-12, 08:45 am
plikasi Arsip Surat Berbasis Web SIPAS harganya brp?dpt source code y
Wida Widiyaw2020-04-11, 12:01 pm
Ingin Mengubah Tanggal Lahir Akun Google
Zulfikri2020-04-10, 10:33 am
Mau tanya biayanya berapa kalau bikin aplikasi SPPD lengkap
willy2020-04-06, 22:59 pm
cara dapat password _ rar dari file aplikasi inventory barangnya gmn ?
Asih2020-03-16, 00:31 am
Bagaimana cara mendapatkan license office 365 ? Makasih
irfan2020-03-14, 10:18 am
selamat pagi pak,apa program sewa mobil ini bisa castem sesuai dengan kebutuhan kami
Aji2020-03-10, 11:39 am
Ini tidak bisa di download min?di info saat download ada notif untuk hubungi admin untuk download aplikasi hrd web
Hamdan2020-03-09, 16:05 pm
Berapa harga membuat aplikasi rental atau penyewaan kamera berbasis web?
rokbi2020-03-09, 09:19 am
kami berniat mau order aplikasi offline simpan pinjam cu? gmna cara dan berapa bugjed nya?
feliks hatam2020-03-07, 16:17 pm
konsultasi pemesanan blog
Fatimah2020-03-06, 14:40 pm
Berapa aplikasi KTP
Muhammad2020-02-26, 20:59 pm
Assalamualaikum min, cara mendapatkan aplikasi ini gmana ya min?
rizki firman2020-02-25, 12:05 pm
mau tanya untuk spk metode fuzzy berapa ya? tentang pemilihan tempat wisata
DAVID2020-02-15, 11:14 am
Aplikasi HRD brp gan_
Rendhi roman2020-02-13, 22:38 pm
Untuk Sistem Rekrutment BIsa_
windra2020-02-13, 14:43 pm
untuk harga program data karyawan brp
adam2020-02-13, 11:59 am
apakah ada aplikasi system harga pasar_
FERY DIANTA2020-02-08, 09:51 am
gan mau nanya harga simpeg versi 7 nya_
rudy2020-02-07, 15:58 pm
berapa harga sw management anggota pak_
Manyu2020-02-07, 14:44 pm
berapa harga aplikasi sppd nya_ pls respon cepat melalui email ya, saya berminat mau beli
yadi2020-02-01, 19:34 pm
harga Aplikasi Simpan Pinjam Berapa
hendi2020-01-25, 18:59 pm
untuk afk sofware developer property penjualan di harga berapa _
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?
Heri Nurjono2020-01-20, 09:45 am
Berapa harga Aplikasi data anggota?
Post your chat:
Name
Email
Chat
Confirm you are NOT a spammer
Information
Company
Address
Jl. Raya Pesanggrahan No. 20 RT. 02/03
Desa Pesanggrahan
Kec. Kesugihan
Kab. Cilacap
Jawa Tengah - 53274
Telp : 0857-1405-7686
Maps
Others
Copyright © 2013. All Rights Reserved. Jasa Pembuatan Website - Raja Putra Media
Tidak ada komentar:
Posting Komentar