Web Tutorial Indonesia 
Pada kesempatan kali ini, nyekrip akan memberikan tutorial bagaimana cara membuat menu dropdown sederhana dengan HTML dan CSS, dalam membuat menu dropdown ini tidak sampai membutuhkan JavaScript/jQuery.
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.
Tampilan menu dropdown
Berikut hasil akhir tutorial cara membuat menu dropdown sederhana, untuk melihat demo dan mengedit skrip, silahkan anda klik tombol “Run Skrip” dibawah ini:
Dibawah ini merupakan hasil modifikasi dari skrip diatas dan bisa menambah menu, banyak yang lapor kalau contoh diatas error ketika ditambah menu. Sebenarnya tidak error, karena hanya sebagai dasar pembelajaran sehingga membutuhkan modifikasi:
Menu Dropdown Versi 2
Oke, langsung saja kita memulai membuat menu dropdown sederhana dengan dimulai mengetikkan skrip/kode HTML dan disusul dengan pembuatan file CSS, lebih jelasnya ikuti langkah-langkah berikut:
Membuat menu dropdown: skrip HTML
Kita mulai dengan membuat wrapper(pembungkus) div dan kita akan memberikan class menu-wrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<div class="menu-wrap">
</div>
</body>
</html>
Didalam wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar link tersebut kita bungkus dengan tag <ul> dan tag <li>:
<ul> <li><a href="beranda.html">Beranda</a></li> <li><a href="tentang.html">Tentang Kami</a></li> <li><a href="kontak.html">Kontak Kami</a> <ul> <li><a href="alamat.html">Alamat Kami</a></li> <li><a href="kebijakan.html">Kebijakan</a></li> </ul> </li> </ul>
Karena kita akan menggunakan eksternal CSS, maka tambahkan skrip berikut dalam tag head:
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Sehingga skrip akhir kita menjadi seperti ini:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Simpan skrip diatas dengan nama “index.html”.
Membuat menu dropdown: skrip CSS
Setelah kita menyelesaikan pembuatan file HTML, selanjutnya dalam membuat menu dropdown kita akan melengkapinya dengan file CSS. Buat file baru dan simpan sebagai “style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
Dalam skrip CSS diatas fungsi skrip pada baris no 1 adalah untuk mereset padding dan margin default dari browser.
Pada skrip no 4 sampai no 6, kita tentukan warna background dari body dan menentukan warna sekaligus ukuran dari font.
Untuk skrip no 10 sampai no 16, untuk mengatur segala atribut dan nilai dari class menu wrap mulai dari lebar, tinggi dan posisi. Selanjutnya kita menambahkan skrip CSS berikut:
.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;
text-transform:uppercase;
}
.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:#53bd84;
left:300px;
top:50px;
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;
}
Pada skrip no 2 diatas berfungsi untuk menghilangkan style bawaan dari tag <ul>.
Skrip no 6 sampai no 12 berfungsi untuk mengatur ukuran, posisi dan merubah tulisan link ke huruf besar.
Skrip no 16 sampai no 17 berfungsi untuk memberikan warna background ketika link di sorot/hover.
Pada skrip no 25 sampai no 31 mengatur agar secara default sub link tidak tampil, karena sub link akan tampil ketika link utama di sorot/hover.
Sehingga skrip CSS akhir kita menjadi seperti ini:
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
.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;
text-transform:uppercase;
}
.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:#53bd84;
left:300px;
top:50px;
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;
}
Simpan dan file tersebut, selanjutnya buka file “index.html” untuk melihat hasil. Demikian tutorial cara membuat menu dropdown sederhana, silahkan berkomentar jika ada hal yang ditanyakan. Menu dropdown diatas bisa digunakan untuk web atau blog, karena pada dasarnya web atau blog menggunakan HTML dan CSS dalam menampilkan data.
Happy Nyekrip!
itu bikin skripnya pake notepad, notepad++, atau software lain?
mohon pencerahannya ya..
(newbie)
Saya biasa pakai notepad++ dan skrip ini diketik di software notepad++ :)
Lebih disarankan memakai Sublime Text 3 karena library code untuk PHP maupun HTML sudah lengkap
makasih pak
jadi bisa belajar memuat website
iya sama-sama :), semoga bisa membantu anda…
thanks mas atas tutorialnya, dan atas bahasanya.
Saya malah tambah ngerti soal ginian karena di tmpt lain bahasanya terlalu mudah
ya dengan tutorial diatas, diharapkan langsung bisa diterapkan.. :)
Thanks mas, sudah sukses ane praktekin di web baru ane. mantap..
mantap dah :)
ijin mencoba kodenya bang udah lama belajar membuat menu drop down tapi gagal terus. Salam kenal
salam kenal juga :)
permisi om mau tanya … , klo buat 8 kolom trus drop down nya tepat di bawah gmna ?? ya ?? , soalnya diatas cma bsa 4 kolom , trus klo dikasi 8 kolom dropdown sub menunya gk tepat bawahnya .
sebelumnya terima kasih , makin jaya nyekrip.com
oh, tinggal bermain di skrip CSS mas, silahkan atur lebar pada properti agar seimbang atau coba skrip di menu download bagian kedua, bukan yang paling atas :) semoga membantu
Sama om, saya juga masalah nya seperti itu.. Dirubah property yang bagian mananya yah ? Sudah dilebarkan tapi tetap submenu muncul di bawah nya KONTAK KAMI :)
ehm.. kalau begitu silahkan anda download skrip menu dropdown di menu download kedua. :)
Keren gan
thanks :)
Keren gan
thanks gan :)
gan kok skripnya gk bisa di gunain di multimenu cuma bsa di run d satu menu aja..
klik download skrip gan, pada tombol download diatas.. :)
Gan,.. Index.html nya di upload kemana ya, ke server apa ke template joomla..? terima kasih
index.html itu sebagai tempat kode html dari menu dropdown, sesuaikan dengan template anda… :)
the best gan ini yg saya cari buat toko online saya :D
Nanya gan,blog saya sudah terpasang menu. Mau buat menu drop down APA ikut petunjuk diatas semua y? Makasih. Bila berkenan kunjungi y medantouristguide blogspot com untuk saran nya gan.
diatas itu salah satu trik gan.. masih banyak trik yang lain… :)
gan apa bisa menu dan sub menunya kita isi dengan teks atau profil tentang kita maklum gan masih pemula mohon informasinya
bisa banget gan… asalkan kita ubah juga CSS-nya… :)
saya sudah mencoba drop down nya ,,, sudah muncul tuisannya… tetapi keika mousenya digerakkan le lst tersebut gag bisa,, list dropdownnya hilang,,, jadi tdk bsa di klik dropdwonnya,,, mohon sarannya..
coba versi yang kedua… download skrip hasil modifikasi pada tombol download diatas… :)
gimana yah. kalo lebih dari sati list menu nya, coba buat dua list menu nya
masih gak ngerti
karena gak bisa buat dua dia keluarnya di tmpat yg sama list menunya
download skrip kedua, yang pertama memang hanya contoh. :)
kk mau minta saran dong…………
sy coba membuat menu drop down seperti diatas tapi setelah selesai untuk bagian contentnya malah turun kebawah………..
Artikelnya OK mas….makasih banget….
Terima kasih atas informasinya.. ijin coba dulu semoga work.. salam kenal dari saya min sharing with syafi alqudsy
terimakasih mas
Beuhh ini penting ini. Dikasih tau dasar2nya. Tapi kepala say masih belum sanggup nangkapnya. Om itu kalo mau bikin untuk d blogger. Kita ketiknya dimana. Widget java script atau gimana?
Terima kasih, sangat bermanfaat sekali. keren! ditunggu tutorial yang lain.
kalo seumpama dropdown nya munculnya onclick bisa nggak?
disini kan kalo dropdownnya ingin muncul tinggal mengarahkan mouse. bisa tidak diganti dengan di klik lalu muncul dropdownnya. jadi intinya pakai onclick mouse bukan onmousehover
Selamat Sore Pak,
sebelumnya saya mengucapkan terimakasih atas tutorial di dalam blognya,
saya mencoba menerapkan menu dropdown seperti di bawah ini, tetapi kenapa tidak berfungsi ya pak, mohon pencerahannya.
saya sudah mencari diblog mana [un dan di youtube, tetapi saya masih belum mengerti… :'(
Beranda
Kelinci
Jenis-Jenis Kelinci
Tips Sederhana Merawat Kelinci
Pakan Kelinci
Kandang Kelinci
Penyakit Kelinci dan Penanganannya
Info Lain Kelinci
Galeri
Galeri Kelinci
Galeri Ikan Cupang
Galeri Hobi yang Lain
Ikan Cupang
Plakat
Halfmoon
Serit
Fancy
Hobi yang Lain
maaf lama reply, maksudnya ini bagaimana? bisa di jelaskan lebih rinci?
Apakah cara diatas bisa juga until WordPress gan?? Trimakasih
bisa gan, di template ya…
makasih gan
ga di kasih gambar-gambar nya pak, biar mudah melihat nya, makasih
kenapa script href -nya juga ikut muncul di menu ya?:(
maksudnya gan? mucul tulisan href? coba download lagi.
Beranda
Tutorial
PHP
CSS
HTML
Pemula
Mahir
Nyekrip
Ngoding
Nyekrip Yuk
Tentang
Kontak
Blog
jadinya kok cuman gini :(
bisa kok gan, coba download lagi.. sudah saya cek. :) coba cek css-nya
Kalau buat menunya dropdownnya ada disamping blog, caranya gimana ya? karena menurut saya cara itu lebih membuat blog saya terlihat lebih luas, Trims
untuk html tetap sama, tinggal modifikasi css. :)
waaaaaaaaa parah parah nih malem miinggu ane ngerasa beruntung bangeet nemuin ni blog , blajarnya jadi lebih gampang
parah juga agan kalau baru tahu. :) haha
Ini yg saya cari, cuma masih bingung prakteknya…ku
bookmark dulu deh
permisi gan
mau nanya nih
yang agan buat kan menu dropdown, kalo itu kan munculnya ke halaman lain
nha ini kan saya mau buat menu
tapi kalo kita klik menu nya itu isinya muncul di bawah
terus kita klik lagi menu yg lain, munculnya di bawah juga (berganti dengan yg awal)
aku ngak tau juga nama menunya itu gan
kek gini contohnya gan
http: gooyaabitemplates com livepreview dzine
menu yg saya maksud gan ( recents, popular, comments)
minta tolong ya gan
atau kalo bisa nama menunya aja gan
tinggal atur aja untuk properti pada link, atur agar pas diklik tidak menuju halaman baru atau new tab. :)
klo bgtu caranya gmna ya, maaaf bru blajar.
info yang bermanfaat, ane jadi tau cara bikin menu dropdown ….
jangan lupa berkunjung juga di solosoloku blogspot com
bos.. gimana kalo atur dropdown menu pakek bootstrap??
wah, kan ada di menu documentation-nya di web-nya bootstrap… coba di explore dulu.. :)
Bingungnya masih di seputar menentukan selector ketika akan style bagian sub menu nya. solusinya bagaimana Mas?
install firebug gan, coba disable elemen satu satu, dan pelajari perbedaannya, disitu agan akan menemukan letak improviasi.. :)
Salam Admin,
Saya newbie dalam hal desain web. Sejauh ini saya sudah bisa membuat dropdown menu dengan menggunakan notepad++. Namun masalahnya, dropdown menunya (sub menu) tidak berfungsi seperti yang saya harapkan alias tidak bisa terbuka. Saya beri ilustrasi, saya buat menu PROFILE, terus ada sub menu “Tentang”, “Visi”, “Misi” dan seterusnya. Kemudian saya buatkan halaman masing-masing sub-menunya, tapi hasilnya tidak bisa dibuka apalagi untuk input data di dalamnya. Karenanya, saya minta bantuan admin untuk membantu memberikan cara membuat link pada multi drop down menu sehingga semuanya bisa berfungsi. Terima kasih admin, saya tunggu responnya.
Salam,
menu pada dropdown itu menggunakan tag li pada tag li gunakan ahref. pelajari dulu cara membuat link, cari diweb nyekrip ini :)
selamat malam admin,
ane suruh bikin html pake menu dropdown dibawah header yg dikasih background gambar,nah ane bingung skripnya kayak gimana
mungkin admin bisa kasih tau saya hehehee..
wah ane blum coba gan… di cari di google dulu yah.. :)
Malam min..
ane kan nyoba tuh menu drop down ny.. trus berhasil tapi ane masukin slider show dibawah menu drop down ny.. jadi ketutup menu drop down lanjutan ny.. mohon bantuan ny maaf nubi. -;-
mohon reply ..
praktekkan sesuai arahan, kalau custom silahkan dipelajari dan ujicoba :)
kalo buat menu khusus seperti dukungan gimana cara buatnya min maklum masih newbie
tinggal ditambahin pada ul li
saya mau buat pesantren salafi online gratis. tapi saya ingin desain tamplatenya dinamis kemudian di dalam dropdown listnya ada icon yang bisa saya insert agar para siswa mudah menelusurinya dan tanpa harus belajar manual booknnya. terus kalau saya link dengan hal kelas virtual (katakanlah menggunakan Wiz IQ) Saya ingin menu tersebut tetap ada diatasnyatolong bagaimana caranya?
maaf dilarang OOT disini :), insaallah nanti saya buatkan tempat para OOT.. thanks
Thank gan atas Ilmunya, Sangat Bermanfaat
Artikelnya Mantaf Gan.. Ijin Copy Kodenya Buat referensi..
min saya udah ada html sama css, nah kalo mau nambahin dropdown gimana ya? kalo copy paste dari atas jadi ngaco urutannya, mohon bantuannya, terimakasih.
siapin space kosong, masalah ditempel dibagian mana itu tergantung kode anda :)
Kalau yang versi css simple aja gimana mas, seperti yang di web itu membuat-menu-bar-dengan-javascript-jquery-animasi tapi agak bingung aku caranya susah x
cara simple? cara diatas sudah simple kok dan mudah diterapkan. kalau mengacu web diluar, silahkan tanyakan admin yang bersangkutan. :)
min, kok ane tampilannya gak berwarna ya? padahal udah ikutin script diatas tuh
maksudnya g berwarna? css sudah terload dengan benar?
Gan
Itu pas ane download skripnya dan ane buka CSS nya
maksud dari skrip nomor 1 apa yah ? yang awalannya kaya gini body, div, h1, h2,
soalnya pas ane tidak pasang itu tetap sama
itu namanya selector css :)
terima kasih gan atas pencerahannya
sangat bermanfaat, semoga makin berkah dan sukses Pak.
usable bgt
Trmksh atas tutorial yang bermanfaat ini
klau mengubah warnanya gimana ya pak
pakai css.. kalau mau tanya tentang css bisa email di nyekripweb@gmail.com
Min kalau misal menu drop-down pas di hover menunya muncul disamping bagaimana?
atur di css :)
mohon bantuan: cara membuat isi dari menu” bar yang terletak dibawah menu bar.. tks admin
untuk mengisi urlnya di sub menu agar menuju lamannya gimana gan?
ditunggu gan
bagus gan, minta gan yang edit html blog ke template
mau nanya gan,itu skrip html nya dimasukkan dmna gan ??
(newbie)
thx
langsung download aja gan, supaya tahu file apa saja yang akan dibuat.
Newbie -______-
nggak ngerti sama sekali :(
SS Gambarnya jg dong pak :(
bro ini yg diikutin tutorial ato file yg didownloadnya bro !?
soalnya yg tutorial ga work, btw tutor sama skrip yg didownload berbeda dan tidak ada penjelasan di skrip yg di download
saya merasa dibohongi T.T
“Dibawah ini merupakan hasil modifikasi dari skrip diatas dan bisa menambah menu, banyak yang lapor kalau contoh diatas error ketika ditambah menu. Sebenarnya tidak error, karena hanya sebagai dasar pembelajaran sehingga membutuhkan modifikasi”
bukan dibohongi, itu penjelasn skrip yang di download bahwa itu hasil modifikasi. bijaklah berkomentar jika tidak hanya akan menunjukkan betapa tidak bijaknya anda.. hehe
ikutan belajar disini brother
Salam. Numpang mondok belajar…hihi
mantap gan tulisannya….
saya nyoba nambah menu setelah kontak kami, nama menunya download, ada menu dropdownnya juga,
menu dropdown kontak kami memang betul,tapi setiap kali saya klik menu download, kok menu dropdownnya muncul
dibawahnya kontak kami? bukan dibawah menu download
Jadi harus menambahkan script juga yah min, apa loading blog tidak menjadi berat nih kalo kebanyakan script. Trima kasih jawabannya
pak, kalau menu yang ada pada dropdown terlalu banyak dan panjang ke bawah cara biar bisa di scroll gimana ya
min, nanya dong klo linknya ga make tag sama bisa ga dibikin dropdown? jadi link utamanya ga make sama tapi menu dropdownnya make, itu bisa ga ya?
min, nanya dong klo linknya ga make tag sama bisa ga dibikin dropdown? jadi link utamanya ga make sama tapi menu dropdownnya make, itu bisa ga ya?
maksudnya gimana ya?
Min, kalau untuk bootstrap sama saja kah?
Gan gimana ya supaya dropdownnya bisa ke float soalnya kalo margin webnya dideketin dropdownnya ketutupan
]
min, mau tanya, kalau dropdown yang tampil berupa table lg atau tampilan halaman lg d bawahnya itu gmna y min, mohon pencerahannya…
makasih min.
Apakah ada batas maksimal untuk membuat menu dropdown?
Terimakasih Mas Berhasil Mantab
min klau mau nambahin gambar / foto di menu drop-down bisa gk, trs caranya gmn,.
Terima kasih.
mau tanya sy habis download template untuk we blog sy dan itu menggunakan format json untuk menunya, sy bingung bagaimana cara membuat submenu dari format json tersebut, karena biasanya sy copas kalau pake format xml. tp json ini beda sy brows g ada yg sesuai. mohon info
json harus dipecah dulu dengan operasi php..
Mantap gan, awalnya saya ambil comot script gan, tapi abis baca disini dan saya cari pengertian fungsi masing2 kode, saya paham dan bisa buat dropdown saya sendiri. Makasih gan
Waduh makasih banget min, ini script yang ane cari-cari. Tapi, bisa dihilangin gak min jarak antara paling atas sama menu dropdownnya min? trima kasih
silahkan berkreasi gan dengan css
saya nyoba pakai coding yang diatas kok gk bsa ganx,hasilx ancur,trs saya download skripx trntya ada navx<apkah memang hrs pakai nav n apkh codingan yg diatas gagal gan?
diatas ada dua versi gan, mending langsung download aja gan.. yang versi kedua
Mantap min, bisa buat dropdown menu di web ane .. (y)
pelajari yang ini gan, agan pasti bisa..
mastah saya bingung itu kalo dari hp munculnya gimana ya, apa muncul semua menu (dalam layar putih) atau seperti menu di blog saya ini.
gk paham ane namanya. pengen buat menu yg kalo diklik dari operamini lawas muncul pilihan di layar putih. itu apa namanya mastah.
halo, bisa tolong saya ngga, lagi belajar bikin data base, utk pendaftaran..pertama user daftar, dan nama user nya tampil. terus user masukin pengikutnya
terimakasih sangat membantu
gan ane mau bikin dropdown yang horizontal gimana ya gan ? tapi ane disini ga pake edit html tapi dari “tambah gadget” ?
gan mksih banyak ilmunya. tpi ada yang gue kagak ngerti di akhir. gimana gabungin css dan htmlnya. yang gue paham, buat file css sendiri, pasti berpisah dgn kode html yg udah gue buat. trus cara gabungin atau integrasikan gan gimana?
dengan cara link rel=”stylesheet” type=”text/css” href=”style.css” media=”all” hrefnya arahin tempat agan menympan file css
gimana cara edit halaman login.. trus kita tambahin am script anda tadi di dreamweaver?
Maksudnya?
Gan, minta tolong gan!
Saya udh mncari cara kmana-mana tp tetep g bisa juga :'(
Coba gan visit blog saya implanetvsdoraemon.blogspot.co.id
Gimana gan solusinya?
Di ubah apanya kah?
Ato dibiarin aja?
Maaf baru balas, webnya sudah jalan dengan baik.
Terimakasih infonya, manfaat tuk yang sedang belajar ngeblog
saya coba gk jadi gesss,.
tadi gk keluar warnanya
perhatikan cssnya.. terimakasih
mau tanya gan. itu skrip yang khusus mengatur posisi menunya agar tampilan berjejer ke samping yang mana?
gan kalo biar di croll ke atas atau ke bawah menunya tetap terlihat bagaimana
Terima kasih mass kontennya sangat bermanfaat, salam kenal yah mass.
gan cara biar ada tombol panah kebawah nya gimana gan ?
Thanks Gan..
kok nggak ada gambar tutorialnya!??
kalo agar menu kategori dropdownnya agar muncul terus gimana kak
Mau tanya untuk sub linknya kok posisinya paten ya? jadi misal saya tambah menu lain, sub link tetap disitu bukannya geser mengikuti induk menunya yang awal
iya Gan, memang sengaja dibuat paten, bisa dirubah cssnya..
Tx kak atas ilmunya, smg berkah 🙏