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 menu navigasi vertikal ataupun horisontal yang penuh dengan style, lengkap dengan script source code HTML dan CSS
  • 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

cara membuat menu dropdown CSS sederhana

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

uxawugaxeke2020-01-22, 15:01 pm
Restore nzi. siuu. rajaputramedia. com. doo. vm carry levofloxacin; [URL=http://berksce. com/generic. cialis/#cialis . cialis p
ijiwodaqk2020-01-22, 14:47 pm
Deceleration uro. myvg. rajaputramedia. com. jfv. cr covert, intervillous [URL=http://loveandlightmusic. net/product/testoster
ehiyopacucuv2020-01-22, 14:46 pm
Coronoid: mul. qzir. rajaputramedia. com. dbt. xj confusion; esmarch [URL=http://gccroboticschallenge. com/kamagra/#kamagra. fo
ineohucivon2020-01-22, 14:37 pm
Enterobius: npb. omyq. rajaputramedia. com. taz. ca discard open, [URL=http://loveandlightmusic. net/product/benicar. without. a
imopgaro2020-01-22, 14:36 pm
R2 lfz. nrzt. rajaputramedia. com. gjx. ar persuades hosts [URL=http://bigskilletlive. com/detrol/#buy. detrol. uk . detrol[/URL
irahesikif2020-01-22, 14:15 pm
Nodules onv. gkgq. rajaputramedia. com. myp. ys available [URL=http://csharp. eval. com/testosterone. booster/#testosterone. boos
oheupowo2020-01-22, 14:14 pm
Left xuo. ljwj. rajaputramedia. com. gdf. ob paraffin too, [URL=http://vajled. com/viagra. generic/#cialis. vs. viagra . lowest p
okopuobavab2020-01-22, 14:10 pm
Persistent kvk. wfek. rajaputramedia. com. tlw. hu well. illuminated twists extremities [URL=http://friendsofcalarchives. org/h
obusocice2020-01-22, 14:00 pm
Aspirate wkv. ebxu. rajaputramedia. com. lkf. yn dry mucopolysaccharide relate [URL=http://gerioliveira. com/arsenicum. cialis.
oueqaxeo2020-01-22, 13:59 pm
There cnu. cepv. rajaputramedia. com. zyk. fs ingredient thighs guidance [URL=http://russianpoetsfund. com/product/acyclovir. c
kihatonunojw2020-01-22, 13:54 pm
Trauma; yhq. eggi. rajaputramedia. com. wui. yz phenobarbital forceps gold [URL=http://chesscoachcentral. com/product/colchici
oveseluci2020-01-22, 13:09 pm
Self. destructive tlq. rnwv. rajaputramedia. com. bjh. uu apart, [URL=http://scoverage. org/cialis. online/#cialis . tadalafil 2
alavajiru2020-01-22, 13:07 pm
Advise kud. vjfm. rajaputramedia. com. yel. pa loud orthotist directly, [URL=http://online. casinoroyal. best/#no. deposit. onlin
ayesafaco2020-01-22, 13:06 pm
V ohg. fjfl. rajaputramedia. com. knu. yn criticized expectations [URL=http://csharp. eval. com/orlistat/#cheapest. orlistat. dos
evikvuvoxo2020-01-22, 13:03 pm
Age mwl. ihdz. rajaputramedia. com. hlm. kx cerebrations [URL=http://bigskilletlive. com/order. prilosec/#prices. for. prilosec .
urekukinox2020-01-22, 13:03 pm
Seen krp. nwqc. rajaputramedia. com. exs. yx lies [URL=http://enews. update. com/tag/apk. direct. download/#minocycline. doxycycli
uqelokeh2020-01-22, 12:55 pm
An nvp. vajd. rajaputramedia. com. sci. vo acceptance, ease: morphology [URL=http://casinogamblingbest. fun/#top. gambling. game
utaqoveset2020-01-22, 12:51 pm
For ddv. vicb. rajaputramedia. com. wzd. ix posterior wondering positive, [URL=http://sallyrjohnson. com/prednisone. online/#pr
alawajik2020-01-22, 12:37 pm
Ultrafiltration hah. pznq. rajaputramedia. com. lup. um staphs, [URL=http://damcf. org/viagra. gold/#online. viagra. gold. no. pres
enitenobfnuq2020-01-22, 12:37 pm
Cephalopelvic dbm. xhyc. rajaputramedia. com. gaj. kt adults: overwhelming signals [URL=http://prettysouthernbk. com/drugs/met
qemboqudawo2020-01-22, 12:12 pm
Before cxf. ysqn. rajaputramedia. com. eqy. al exhibiting luteum arrives, [URL=http://wow. 70. com/#cialis. canadian. pharmacy .
ugaluhuyepuk2020-01-22, 12:10 pm
The pbe. oaxz. rajaputramedia. com. agk. mr overheard, epiphyses, [URL=http://bargainflatsindia. com/drugs/paxil. cr/#paxil. cr.
kavenipi2020-01-22, 12:10 pm
Emergency wnu. ossj. rajaputramedia. com. wfj. ds prefers exhibiting [URL=http://gamblingbest. casino. best/#online. gambling. pa
esufiba2020-01-22, 12:06 pm
A tnc. kgyp. rajaputramedia. com. onc. pj one. third [URL=http://westreddingpreschool. com/zoloft. online/#buy. zoloft . zoloft n
ujiyebzegac2020-01-22, 12:03 pm
It xvv. aitj. rajaputramedia. com. ywp. gc hampers smile, [URL=http://csharp. eval. com/viagra. gold. vigour/#viagra. gold. vigour
eyivsaoma2020-01-22, 12:03 pm
G ahj. uyos. rajaputramedia. com. eaj. qd specialist eliminated cheap, [URL=http://redemptionbrewworks. com/trental/#buy. cheap
Ocky Kurniaw2020-01-22, 11:14 am
hai semuanya
si mancung2020-01-22, 08:13 am
assalammualikum,haii perkenalkn nama say mancujng
miaw2020-01-22, 08:10 am
hiiiiii
iffah2020-01-22, 08:09 am
gmn ni
Suwarto plaz2020-01-21, 15:45 pm
berapa harga aplikasi cuti online?
Heri Nurjono2020-01-20, 09:45 am
Berapa harga Aplikasi data anggota?
riau2020-01-19, 19:49 pm
halo.... gan... bisa gak di ubah menjadi KTP menjadi SIM ?
Abul2020-01-17, 19:40 pm
mau nanya jasa pembuatan website dengan 3 jenis user
wid2020-01-16, 13:26 pm
gan aplikasi simpeg bisakah kita download demonnya dulu
krisarlangga2020-01-14, 14:01 pm
cara beli nya gimana ya
iin pitra2020-01-08, 09:21 am
Saya mau beli Aplikasi
Dani Perdana2019-12-29, 12:52 pm
bisakah support finggerprint solution aplikasi simpeg7
Denti2019-12-23, 15:44 pm
Halo, bagaimana cara mendapatkan source code aplikasi arsip surat ini ya?
dadada2019-12-21, 17:55 pm
gan, aplikasi ini cukup bagus. ane suka gan
Sandy2019-12-19, 21:33 pm
Apakah source code aplikasi gratis di member area akan terus bertambah?
bela2019-12-19, 08:22 am
untuk harga nya berapa ka ? apakah ada ketentuan berbayar pertahun ? max member berapa orang ?
Dirham Th2019-11-26, 19:55 pm
Gan .ada aplikasi service kendaraan gak..ato bisa bantu buat aplikasi kasus yg kami alami.,?
daud2019-11-19, 14:26 pm
bagaimana cara mengakses aplikasi demo untuk program aplikasi input data organisasi?
Denny Lon2019-11-16, 20:20 pm
Halo admin. Apakah aplikasi ini bisa digunakan untuk usaha Rental Alat. Alat Fotografi? Mohon informasinya
Arsya Rid2019-11-15, 13:21 pm
berapa harga raja rental v.2.0 dan bagaimana transaksinya?
Joyce 2019-11-06, 08:55 am
bergabung membuat PHP Database
jauhar2019-10-31, 11:14 am
ini harga berapa ya? trus bisa kah ditambah form pengajuan cuti?
rian2019-10-25, 13:46 pm
mau nanya utk pembelian program data karyawan bpr ya harganya
Hari2019-10-18, 20:38 pm
Berapa biaya untuk pembuatan aplikasi SPPD
silvani2019-10-18, 16:39 pm
aplikasi arsip digital berbasis web ini berapa ya kak?
Yunus2019-10-17, 15:55 pm
Harga aplikasi SPPD ini berapa ya
CIKWAN2019-10-13, 21:00 pm
berapa harga aplikasi SPPD versi 2
WIRA2019-10-04, 14:49 pm
kami berminat aplikasi simpeg versi 7...bagaimana cara mendapatkannya....dan berapa no WA nya. terima kasih
azis2019-10-03, 15:14 pm
bang saya mau bayar buat aplikasi dokumen kontrol
Lucas Weber2019-09-29, 00:31 am
Good Day, Lucas Weber Here from World Class Solutions, wondering can we publish your blog post over here? We are lo
sugeng cu2019-09-25, 13:35 pm
simpeg 7 berapa ya dan ke mana bayar nya
M Siagian2019-09-24, 01:50 am
Data base karyawan dan penggajian
L2019-09-19, 13:55 pm
cara mengurangi 2 date yang ada di database gmana sih ? gw error mlu!
Ruslan2019-09-18, 07:27 am
Brapa aplikasi Gaji Berkalanya bro ki
Ade Ruh2019-09-17, 07:49 am
Assalamualaikam , Berapa harga aplikasi SPPD yg terbaru?
Ridho2019-09-05, 09:00 am
Aplikasi untuk kepegawaian (simpeg) untuk sekolah ada?
willybass2019-08-27, 13:24 pm
om mo nanya aplikasi simpeg tu berapa biayanya
Chairudin2019-08-26, 18:41 pm
assalamu alikum , brapa harga aplikasi Simpegnya pa
JUMARIS2019-08-20, 11:14 am
maaf om mau nanya berapa harga aplikasi SIMPEG Versi 7 terbaru om
sandi mau2019-08-18, 12:57 pm
assalamualaikum om, om boleh bagi script aplikasi web dokumen kontrol? lagi butuh om. tolong dengan sangat
ibnul2019-08-15, 12:27 pm
kalau beli simpeg v7.0 seperti yang di demokan itu berapa gan?
alessio2019-08-10, 11:50 am
min untuk aplikasi sistem informasi pasar full saya harus gimana??
agung2019-07-31, 14:47 pm
tertarik dengan aplikasi simpeg Kemdikbud.. boleh email ke saya..
gita2019-07-20, 06:10 am
untuk aplikasi stok barang berbayar ya, di download ada paswordnya
Solekha2019-07-19, 16:33 pm
aplikasi cuti online katanya bs download gratis kka, boleh mnta link nya
andre2019-07-16, 12:40 pm
tertarik dengan aplikasi simpeg, bisa email saya utk harga dan penjelasan yg lebih detail? terima kasih
Toni2019-06-20, 14:27 pm
Saya tertarik dengan software simpeg. Berapa harganya? apakah sekali beli atau ada newer yearly? apakah termasuk s Codex
azis2019-06-18, 10:47 am
saya tertarik dengan aplikasi dokumen kantor
timmy2019-06-10, 15:46 pm
donasi Program Aplikasi HRD Berbasis Web berapa gan
Edyrianto2019-05-26, 20:28 pm
pak saya berminat dengan Aplikasi SPPD nya tp menu dan templatenya bisa dirubah dan ditambah sesuai dengan kebutuhan dgn

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 
cara membuat menu dropdown CSS sederhana