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 Complete 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

Translate Page

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

Google +

Live Chat

Lawanna Bett2018-06-21, 21:28 pm
Dear Sir Is going to you be an online marketer, do you own a company or businesses? ) I used to be just looking a
chariems2018-06-18, 21:12 pm
bagaimana cara kami beli aplikasi system informasi pasarnya ?? dan berapa harganya
Ahmad2018-05-22, 22:56 pm
admin, bagaimana cara download nya ya ?
Rifcy2018-04-28, 09:54 am
Gan..minta no kantak agan?
Nano Iraw2018-04-28, 08:36 am
saya mencoba daftar aplikasi raja kop tapi lupa IDnya gimanaYa?
ibnu2018-04-27, 13:01 pm
saya ingin download dan mengetahui apliasi sipas, apa saja yang harus saya penuhi
aditya2018-04-27, 07:23 am
pak berapa harga aplikasi arsip berbasis web SIPAS versi 2 terbaru?
Rosevelt2018-04-21, 19:48 pm
Apakah bapak menjual Aplikasi KGB yang diperuntukkan untuk kecamatan tp yang offline
Indri2018-04-09, 14:10 pm
Apa blh dibuatkn aplikasi untuk data pegawai yg memuat 500-an peg, ada menu tgl lahir ybs sekaligus jd reminder bg user
Awan2018-04-03, 15:36 pm
Saya Ingin mendownload Aplikasi Sipas
Taufiq2018-03-28, 09:19 am
Mohon kirimkan proposal dan donasi/biaya untuk SIMPEG Versi berbayar/versi7. Terimakasih...
Mudassir2018-03-27, 17:24 pm
Berapa harga simpegnya?? apa bisa di kastem??
Nasrullah2018-03-26, 14:23 pm
bisa kirimkan proposal serta harganya untuk simpeg yg versi 7nya? trims
FAJAR AL 2018-03-02, 23:19 pm
mohon untuk basic price harga aplikasi stok barang berbasis dekstop. tnx
wikko2018-02-26, 09:24 am
Admin saya tertarik dengan aplikasi kontrol dokumen mohon informasinya
wikko2018-02-26, 09:20 am
Berapa Harga Aplikasi Dokumen kontrol
Dhanis2018-02-15, 07:42 am
gan bisa request website kdata kepegawaian sesuai dengan yg diinginkan ? harga nya juga brp ?
Dony2018-02-11, 11:11 am
Apakah menjual aplikasi SIMPEG khusus untuk dinas kesehatan? Tks
Dony2018-02-11, 11:07 am
Aplikasi yg SIMPEG yg saya maksud tidak berbasis web tetapi offline saja
Dony2018-02-11, 11:04 am
Apakah menjual aplikasi SIMPEG khusus untuk dinas kesehatan? Tks
budi2018-02-10, 12:03 pm
saya mau download aplikasi sistem kepegawaian kok nga bisa gmn caranya ya ?
Haniffah 2018-02-07, 09:15 am
Min, boleh minta sourcecode aplikasinya ga?
ani2018-02-04, 18:27 pm
bagaimana cara memperbaiki weibseit yang di hack?
hime2018-01-31, 15:28 pm
scriptnya ga bisa di download yaaa,cara downloadnya gimana ya??
Suci Yuli2018-01-31, 13:53 pm
Permisi kak mau tanya klo bikin laporan dengan jquery agar datanya mau ke record itu bagaimana? terimaksih
yadi2018-01-29, 10:02 am
maaf mau tanya password rar aplikasi stok barang apa ?
yadi2018-01-29, 10:01 am
maaf mau tanya password rar aplikasi stok barang apa ?
sunanda2018-01-28, 06:32 am
Gan saya mautanya program database karyawan bisa input karyawan 1100 tdk, utk instal 1 kali/dapat dgunakan berulangkali.
Aditya2018-01-23, 11:29 am
maaf pak $op itu apa ya??
Ali2018-01-21, 19:28 pm
Mas, sy minta mysql ebook mysql nya donk..
sofian2018-01-11, 15:50 pm
seuai dengan kebutuhan format SPPD kantor sya
sofian2018-01-11, 15:48 pm
pak saya berminat dengan Aplikasi SPPD nya tp menu dan templatenya bisa dirubah dan ditambah sesuai dengan kebutuhan dgn
SETYA2018-01-10, 12:48 pm
pelajaran ini membuat saya mengerti
bangroel2018-01-07, 10:41 am
apakah aplikasi stok gudang barang berbasis web nya cocok untuk gudang yang mutasi barangnya keluar dan kembali. thx
wikko 2018-01-03, 20:47 pm
Bolehkan minta source code aplikasi dokumen kontrol kasi sangat perlu
Heri2018-01-03, 15:41 pm
tolong cara gimana dapatkan Aplikasi Sistem Informasi Data Karyawan, dan apakah aplikasi berjalan sempurna tanpa error
maidi2017-12-18, 05:41 am
mhn info harga aplikasi dokumen kontrol dan surat perintah perjalanan dinas
bagas2017-12-17, 11:11 am
minta nomor kontak person yang bisa dihubungi
zay2017-12-03, 11:39 am
sangat membantu, terimakasih mastah
Dwi2017-11-30, 11:28 am
Bisa tau hargax min????
abdullah2017-11-27, 23:31 pm
min, password winrar aplikasi inventory barang nya apa ya ?
Spongbob 2017-11-25, 09:22 am
Min link download script ganti password php tidak bisa
Sagoh2017-11-24, 15:41 pm
Halooo. Salam kenal
dwi2017-11-22, 22:15 pm
min kok buat live chat ga bisa ya cara bukanya gimana
rudy2017-10-27, 11:39 am
script nya ko ga bisa di blok ya??. mau saya copy
Yudhistir2017-10-10, 10:48 am
Maaf mas, link download simpeg v.4 nya kok ga bisa ya
yosie2017-10-09, 14:07 pm
selamat siang, tertarik dengan program aplikasi stock barangnya. apakah ini free atau harus beli
junaidi2017-10-09, 08:25 am
kami mau input data pegawai tapi download aplikasinya susah, tolong solusinya admin.. a.n SDN 269 LAMBATU, Lutim
bayu 2017-10-07, 18:32 pm
misi admin saya mau tanya kalo buat download nya dimana iya
Dalil2017-09-20, 16:24 pm
Min, Q pingin bikin sofware data base keanggotaan sebuah Organisasi dengan daftar data diri, tahun pelantikan, dan area
igratiann2017-09-20, 11:27 am
Min, mau nanya, ada contoh script untuk multiple insert dengan tabel, gak?
Sherina s2017-09-18, 09:52 am
cara download nya gimana ini teh?
Leni M.A2017-09-14, 13:48 pm
Kasih link nya dongg plisss aku butuh buat tugas sekolah nihhh
Teguh2017-09-13, 20:06 pm
cara membuat widget google+ gimana, buat tutorialnya dong
intan2015-03-05, 22:22 pm
kalo ingin membuat halaman admin dari program chat seperti ini bagaimana script php nya ???
Amat2015-01-21, 19:03 pm
Untuk kolom bawaan gimana isinya
andela2014-09-11, 09:01 am
saya memerlukan aplikasi/softwere untuk membuat website bagaimana caranya?
Andreas2014-05-22, 19:40 pm
Isi artikelnya bagus, mudah di ikuti buat praktek langsung. Thanks admin
Nanda2014-05-17, 02:07 am
Cara pemesanan aplikasi berbasis web nya gimana, apa bisa scriptnya saja yang dikirim?
Edo2014-01-29, 06:13 am
Dear Admin, Kalo mau order script bagaimana caranya?
Irwan2014-01-22, 03:44 am
Pak admin, kapan free aplikasi nya di release?
angelo2014-01-11, 03:17 am
pak admin websitenya keren abis, kapan kita berkumpul ya
Sania2014-01-04, 03:21 am
Bagaimana cara instal template yg sudah didownload?

Post your chat:


Name



Email



Chat



Confirm you are NOT a spammer

 

cara membuat menu dropdown CSS sederhana