Apa elemen html untuk membuat sebuah drop down list?

Daftar isi

  • 1 HTML apa yang benar untuk membuat daftar drop down?
  • 2 Apa fungsi dari menu drop down Allow?
  • 3 Apa HTML yang benar untuk membuat area teks?
  • 4 Langkah langkah memanfaatkan fungsi validasi data?
  • 5 Apa yang dimaksud dengan menu dan toolbar?
  • 6 Tag apa yg digunakan untuk membuat tabel?
  • 7 Apakah ada menu drop-down?
  • 8 Bagaimana Cara membuat menu dropdown?

Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element

  • .

Jawaban: Untuk membuat pilihan sel dalam bentuk dropdown list atau sering juga disebut combo box, ikuti langkah-langkah berikut : Pilih (seleksi) Sel/Range dimana dropdown list akan ditampilkan.

Apa yang dimaksud dengan menu drop down?

Supaya lebih menarik, menu di website dapat Anda kreasi sendiri dengan membuat menu dropdown CSS. Anda pasti tidak asing dengan istilah dropdown menu. Dropdown menu merupakan sebuah elemen kontrol grafis yang memunculkan daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada.

Apa HTML yang benar untuk membuat area teks?

HTML element merepresentasikan input control yang memiliki area teks lebih dari satu baris. Untuk mengatur tinggi dan lebar dari area teks tersebut dapat digunakan attribute rows (untuk baris) dan cols (untuk kolom), atau lebih baik lagi dengan CSS height dan width property.

Langkah langkah memanfaatkan fungsi validasi data?

Cara menggunakan Data Validation dengan Whole Number

  1. Letakan Pointer pada cell C3.
  2. Masuk Ke Tab Data pilih data validation.
  3. Pada tab setting sesuaikan seperti gambar gambar di bawah ini. Allow : Whole Number.
  4. Tambahkan Input message sebagai. Title : “Perhatian”
  5. Tambahkan Error alert.
  6. Setelah selesai Klik OK.

Jelaskan apa yang dimaksud dengan menu?

Menu berasal dari bahasa prancis Le Menu yang berarti daftar makanan yang disajikan kepada tamu di ruang makan. Dalam lingkungan rumah tangga, menu diartikan sebagai susunan makanan atau hidangan tertentu. Menu disebut juga Bill of Fare oleh orang Inggris.

Baris toolbar adalah kumpulan perintah dalam bentuk ikon-ikon yang berisi tool atau alat untuk mempermudah menyelesaikan dokumen. Fungsi utama Toolbar adalah mempercepat akses kesejumlah perintah yang sering dipakai. Untuk menggunakan Toolbar, klik salah satu icon yang mewakili perintah yang kita inginkan.

Tag apa yg digunakan untuk membuat tabel?

Tag untuk Membuat Tabel di HTML Tag <table> untuk membungkus tabelnya. Tag untuk membungkus bagian kepala tabel. Tag

untuk membungkus bagian body dari tabel. Tag (tabel row) untuk membuat baris.

Apa perbedaan penggunaan antara input text dengan text area?

Secara umum, bidang input adalah bidang satu baris (mungkin untuk membawa sesuatu seperti nama depan atau nama belakang, nomor telepon, email). Textarea adalah bidang multisaluran yang memungkinkan Anda menekan ENTER! Mereka digunakan untuk alamat atau tipe data panjang dan kompleks lainnya (juga catatan, misalnya).

Pengertian Drop-down. Sebuah menu drop-down (juga dropdown menu atau daftar dropdown atau “menu drop”) adalah elemen kontrol grafis , mirip dengan kotak daftar , yang memungkinkan pengguna untuk memilih salah satu nilai dari daftar.

Anda kini sudah mempelajari cara membuat drop down menu CSS sederhana melalui tutorial ini. Menu dropdown penting untuk menjadikan tampilan website Anda lebih rapi dan responsive. Salah satu cara mudah untuk membuat menu dropdown adalah dengan menggunakan rule CSS di file HTML.

Apakah Anda bisa buka tab menu data validation?

Silakan buka option box ” Data Validation ” dengan cara pilih tab menu Data >> Data Validation atau anda juga bisa menggunakan shortcut dengan nekan tombol ALT + A + V pada keyboard

Nyekrip » HTML » Tips Trik HTML » Cara Membuat Menu Dropdown Sederhana

  • Updated on Mei 22, 2015
  • Admin
  • Tips Trik HTML
  • 146 Comments

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!

About The Author

Admin

Suka ingin berbagi pengetahuan dan pengalaman nyekrip program yang dituangkan dalam web ini dan sekarang sedang fokus mengembangkan Web Tutorial berbahasa Indonesia. Nyekrip - Web Tutorial Indonesia

Artikel Terkait

  • Cara Membuat Tabel HTML 5 Dengan CSS

  • Cara Melihat Source Code Website

  • Cara Membuat Halaman Web Sederhana

Comments

  1. Abe April 20, 2015 at 2:43 am

    itu bikin skripnya pake notepad, notepad++, atau software lain?
    mohon pencerahannya ya..
    (newbie)

    1. Admin Article Author April 20, 2015 at 7:34 am

      Saya biasa pakai notepad++ dan skrip ini diketik di software notepad++ :)

      1. Meiliyan Januari 27, 2019 at 2:47 am

        Lebih disarankan memakai Sublime Text 3 karena library code untuk PHP maupun HTML sudah lengkap

  2. viv April 27, 2015 at 5:58 am

    makasih pak
    jadi bisa belajar memuat website

    1. Admin Article Author Mei 12, 2015 at 3:56 am

      iya sama-sama :), semoga bisa membantu anda…

  3. Fuad L. Mei 6, 2015 at 11:10 am

    thanks mas atas tutorialnya, dan atas bahasanya.
    Saya malah tambah ngerti soal ginian karena di tmpt lain bahasanya terlalu mudah

    1. Admin Article Author Mei 12, 2015 at 3:55 am

      ya dengan tutorial diatas, diharapkan langsung bisa diterapkan.. :)

  4. Gunawan Mei 10, 2015 at 8:45 am

    Thanks mas, sudah sukses ane praktekin di web baru ane. mantap..

    1. Admin Article Author Mei 12, 2015 at 3:12 am

      mantap dah :)

  5. rudhytheart Mei 13, 2015 at 2:34 pm

    ijin mencoba kodenya bang udah lama belajar membuat menu drop down tapi gagal terus. Salam kenal

    1. Admin Article Author Mei 14, 2015 at 12:10 am

      salam kenal juga :)

  6. Reynaldo Mei 21, 2015 at 1:11 pm

    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

    1. Admin Article Author Mei 22, 2015 at 7:00 am

      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

      1. niken Mei 22, 2015 at 7:51 am

        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 :)

        1. Admin Article Author Mei 22, 2015 at 8:00 am

          ehm.. kalau begitu silahkan anda download skrip menu dropdown di menu download kedua. :)

  7. Vincent Mei 22, 2015 at 4:17 am

    Keren gan

    1. Admin Article Author Mei 22, 2015 at 7:07 am

      thanks :)

  8. Gurit Indra Mei 30, 2015 at 4:44 am

    Keren gan

    1. Admin Article Author Juni 4, 2015 at 1:16 am

      thanks gan :)

  9. Rizki Awal Jumhari Juni 2, 2015 at 11:40 am

    gan kok skripnya gk bisa di gunain di multimenu cuma bsa di run d satu menu aja..

    1. Admin Article Author Juni 4, 2015 at 1:18 am

      klik download skrip gan, pada tombol download diatas.. :)

  10. Percetakan Juni 4, 2015 at 2:57 pm

    Gan,.. Index.html nya di upload kemana ya, ke server apa ke template joomla..? terima kasih

    1. Admin Article Author Juni 5, 2015 at 1:55 am

      index.html itu sebagai tempat kode html dari menu dropdown, sesuaikan dengan template anda… :)

  11. Ilham Bahrul Muhit Juni 4, 2015 at 2:59 pm

    the best gan ini yg saya cari buat toko online saya :D

  12. jonggi Juni 7, 2015 at 6:29 am

    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.

    1. Admin Article Author Juni 18, 2015 at 6:18 am

      diatas itu salah satu trik gan.. masih banyak trik yang lain… :)

  13. indria Juni 8, 2015 at 8:20 am

    gan apa bisa menu dan sub menunya kita isi dengan teks atau profil tentang kita maklum gan masih pemula mohon informasinya

    1. Admin Article Author Juni 18, 2015 at 6:20 am

      bisa banget gan… asalkan kita ubah juga CSS-nya… :)

  14. fatimah Juni 10, 2015 at 10:24 am

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

    1. Admin Article Author Juni 18, 2015 at 6:24 am

      coba versi yang kedua… download skrip hasil modifikasi pada tombol download diatas… :)

  15. Tika Juni 26, 2015 at 4:20 am

    gimana yah. kalo lebih dari sati list menu nya, coba buat dua list menu nya
    masih gak ngerti

  16. Tika Juni 26, 2015 at 4:21 am

    karena gak bisa buat dua dia keluarnya di tmpat yg sama list menunya

    1. Admin Article Author November 1, 2015 at 3:16 am

      download skrip kedua, yang pertama memang hanya contoh. :)

  17. ahmad Juli 2, 2015 at 8:50 am

    kk mau minta saran dong…………
    sy coba membuat menu drop down seperti diatas tapi setelah selesai untuk bagian contentnya malah turun kebawah………..

  18. Muhammad Kholiqin Juli 10, 2015 at 12:33 am

    Artikelnya OK mas….makasih banget….

  19. syafi alqudsy Agustus 21, 2015 at 12:24 am

    Terima kasih atas informasinya.. ijin coba dulu semoga work.. salam kenal dari saya min sharing with syafi alqudsy

  20. afiq September 1, 2015 at 10:43 pm

    terimakasih mas

  21. agus prasetyo September 2, 2015 at 12:05 am

    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?

  22. Ahmad Afif September 15, 2015 at 2:24 am

    Terima kasih, sangat bermanfaat sekali. keren! ditunggu tutorial yang lain.

  23. Muhib September 15, 2015 at 4:20 am

    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

  24. Yudhis September 15, 2015 at 8:34 am

    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

    1. Admin Article Author November 1, 2015 at 3:17 am

      maaf lama reply, maksudnya ini bagaimana? bisa di jelaskan lebih rinci?

  25. jonggi September 16, 2015 at 3:45 pm

    Apakah cara diatas bisa juga until WordPress gan?? Trimakasih

    1. Admin Article Author September 19, 2015 at 5:40 pm

      bisa gan, di template ya…

  26. Muhammad Ashshiddiqi September 17, 2015 at 3:52 am

    makasih gan

  27. jasa ganti domain September 21, 2015 at 11:18 am

    ga di kasih gambar-gambar nya pak, biar mudah melihat nya, makasih

  28. fandy Oktober 2, 2015 at 1:49 pm

    kenapa script href -nya juga ikut muncul di menu ya?:(

    1. Admin Article Author Oktober 2, 2015 at 2:57 pm

      maksudnya gan? mucul tulisan href? coba download lagi.

  29. febi Oktober 9, 2015 at 2:41 pm

    Beranda
    Tutorial
    PHP
    CSS
    HTML
    Pemula
    Mahir
    Nyekrip
    Ngoding
    Nyekrip Yuk
    Tentang
    Kontak
    Blog

    jadinya kok cuman gini :(

    1. Admin Article Author Oktober 9, 2015 at 3:08 pm

      bisa kok gan, coba download lagi.. sudah saya cek. :) coba cek css-nya

  30. Kirana Putri Oktober 10, 2015 at 4:47 am

    Kalau buat menunya dropdownnya ada disamping blog, caranya gimana ya? karena menurut saya cara itu lebih membuat blog saya terlihat lebih luas, Trims

    1. Admin Article Author November 1, 2015 at 3:21 am

      untuk html tetap sama, tinggal modifikasi css. :)

  31. fahmi November 7, 2015 at 1:48 pm

    waaaaaaaaa parah parah nih malem miinggu ane ngerasa beruntung bangeet nemuin ni blog , blajarnya jadi lebih gampang

    1. Admin Article Author November 8, 2015 at 10:43 am

      parah juga agan kalau baru tahu. :) haha

  32. suaranetizen.com November 25, 2015 at 7:14 am

    Ini yg saya cari, cuma masih bingung prakteknya…ku
    bookmark dulu deh

  33. Josprima Sihombing Desember 7, 2015 at 6:25 am

    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

    1. Admin Article Author Desember 7, 2015 at 2:34 pm

      tinggal atur aja untuk properti pada link, atur agar pas diklik tidak menuju halaman baru atau new tab. :)

      1. nita Oktober 30, 2016 at 7:17 pm

        klo bgtu caranya gmna ya, maaaf bru blajar.

  34. Khasna Khasna Desember 8, 2015 at 2:54 am

    info yang bermanfaat, ane jadi tau cara bikin menu dropdown ….

    jangan lupa berkunjung juga di solosoloku blogspot com

  35. Erfan Desember 8, 2015 at 4:33 pm

    bos.. gimana kalo atur dropdown menu pakek bootstrap??

    1. Admin Article Author Desember 9, 2015 at 8:18 am

      wah, kan ada di menu documentation-nya di web-nya bootstrap… coba di explore dulu.. :)

  36. Indra Desember 10, 2015 at 3:14 pm

    Bingungnya masih di seputar menentukan selector ketika akan style bagian sub menu nya. solusinya bagaimana Mas?

    1. Admin Article Author Desember 17, 2015 at 4:02 pm

      install firebug gan, coba disable elemen satu satu, dan pelajari perbedaannya, disitu agan akan menemukan letak improviasi.. :)

  37. abidin Desember 15, 2015 at 6:06 am

    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,

    1. Admin Article Author Desember 17, 2015 at 4:21 pm

      menu pada dropdown itu menggunakan tag li pada tag li gunakan ahref. pelajari dulu cara membuat link, cari diweb nyekrip ini :)

  38. dede Januari 2, 2016 at 2:43 pm

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

    1. Admin Article Author Januari 16, 2016 at 6:34 am

      wah ane blum coba gan… di cari di google dulu yah.. :)

  39. Fikriadi Februari 1, 2016 at 4:28 pm

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

    1. Admin Article Author Maret 9, 2016 at 3:11 am

      praktekkan sesuai arahan, kalau custom silahkan dipelajari dan ujicoba :)

  40. RIFKI Februari 10, 2016 at 1:38 am

    kalo buat menu khusus seperti dukungan gimana cara buatnya min maklum masih newbie

    1. Admin Article Author Februari 28, 2016 at 5:26 am

      tinggal ditambahin pada ul li

  41. anwar Februari 23, 2016 at 12:29 am

    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?

    1. Admin Article Author Februari 28, 2016 at 4:39 am

      maaf dilarang OOT disini :), insaallah nanti saya buatkan tempat para OOT.. thanks

  42. Putra Faizin Maret 20, 2016 at 11:28 am

    Thank gan atas Ilmunya, Sangat Bermanfaat

  43. Kojel Maret 24, 2016 at 2:45 am

    Artikelnya Mantaf Gan.. Ijin Copy Kodenya Buat referensi..

  44. yuar Maret 29, 2016 at 4:03 pm

    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.

    1. Admin Article Author Maret 30, 2016 at 12:18 pm

      siapin space kosong, masalah ditempel dibagian mana itu tergantung kode anda :)

  45. anis April 9, 2016 at 5:07 am

    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

    1. Admin Article Author April 10, 2016 at 4:15 pm

      cara simple? cara diatas sudah simple kok dan mudah diterapkan. kalau mengacu web diluar, silahkan tanyakan admin yang bersangkutan. :)

  46. dhani Mei 5, 2016 at 7:57 am

    min, kok ane tampilannya gak berwarna ya? padahal udah ikutin script diatas tuh

    1. Admin Article Author Mei 6, 2016 at 2:54 am

      maksudnya g berwarna? css sudah terload dengan benar?

  47. Ivan Dhzokhar Mei 10, 2016 at 8:48 pm

    Gan
    Itu pas ane download skripnya dan ane buka CSS nya
    maksud dari skrip nomor 1 apa yah ? yang awalannya kaya gini body, div, h2, h2,

    soalnya pas ane tidak pasang itu tetap sama

    1. Admin Article Author Mei 11, 2016 at 1:57 pm

      itu namanya selector css :)

  48. mr x Mei 16, 2016 at 6:07 am

    terima kasih gan atas pencerahannya

  49. vantommy Mei 30, 2016 at 3:57 am

    sangat bermanfaat, semoga makin berkah dan sukses Pak.

  50. r taufan Juni 7, 2016 at 8:50 am

    usable bgt

  51. Icha Juni 21, 2016 at 11:31 am

    Trmksh atas tutorial yang bermanfaat ini

    klau mengubah warnanya gimana ya pak

    1. Admin Article Author Juni 25, 2016 at 11:11 am

      pakai css.. kalau mau tanya tentang css bisa email di

  52. Rin Juni 29, 2016 at 7:16 am

    Min kalau misal menu drop-down pas di hover menunya muncul disamping bagaimana?

    1. Admin Article Author Juli 2, 2016 at 8:08 am

      atur di css :)

  53. MUhammad Ulinuha Juli 24, 2016 at 8:36 am

    mohon bantuan: cara membuat isi dari menu” bar yang terletak dibawah menu bar.. tks admin

  54. sumang09 Agustus 5, 2016 at 9:11 am

    untuk mengisi urlnya di sub menu agar menuju lamannya gimana gan?
    ditunggu gan

  55. Hisyam Ammar Agustus 7, 2016 at 4:44 am

    bagus gan, minta gan yang edit html blog ke template

  56. vina Agustus 12, 2016 at 11:04 am

    mau nanya gan,itu skrip html nya dimasukkan dmna gan ??
    (newbie)
    thx

    1. Admin Article Author Mei 7, 2017 at 4:22 am

      langsung download aja gan, supaya tahu file apa saja yang akan dibuat.

  57. Astrid Naning Yuana Agustus 13, 2016 at 4:00 am

    Newbie -______-
    nggak ngerti sama sekali :(
    SS Gambarnya jg dong pak :(

  58. Alfredo Sinaga Agustus 23, 2016 at 12:38 pm

    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

    1. Admin Article Author Mei 7, 2017 at 4:10 am

      “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

  59. ardiles sepatu Agustus 25, 2016 at 8:09 am

    ikutan belajar disini brother

  60. I'mnotrobot Agustus 27, 2016 at 9:07 am

    Salam. Numpang mondok belajar…hihi

  61. Ahmad Sahro September 5, 2016 at 7:30 am

    mantap gan tulisannya….

  62. jatmiko September 16, 2016 at 4:31 pm

    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

  63. Anak Tkj September 22, 2016 at 6:25 pm

    Jadi harus menambahkan script juga yah min, apa loading blog tidak menjadi berat nih kalo kebanyakan script. Trima kasih jawabannya

  64. riduan Oktober 4, 2016 at 12:47 pm

    pak, kalau menu yang ada pada dropdown terlalu banyak dan panjang ke bawah cara biar bisa di scroll gimana ya

  65. Levi Tanrio Oktober 9, 2016 at 9:36 am

    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?

    1. Levi Tanrio Oktober 9, 2016 at 9:44 am

      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?

      1. Admin Article Author April 2, 2017 at 4:38 am

        maksudnya gimana ya?

  66. Ivana November 9, 2016 at 8:20 am

    Min, kalau untuk bootstrap sama saja kah?

  67. Esanove November 29, 2016 at 5:51 am

    Gan gimana ya supaya dropdownnya bisa ke float soalnya kalo margin webnya dideketin dropdownnya ketutupan
    ]

  68. ilyas Januari 25, 2017 at 5:49 am

    min, mau tanya, kalau dropdown yang tampil berupa table lg atau tampilan halaman lg d bawahnya itu gmna y min, mohon pencerahannya…
    makasih min.

  69. Krisnanda Februari 13, 2017 at 1:24 pm

    Apakah ada batas maksimal untuk membuat menu dropdown?

  70. Gaya Minimalis Maret 2, 2017 at 5:05 am

    Terimakasih Mas Berhasil Mantab

  71. Rudy Maret 9, 2017 at 2:54 pm

    min klau mau nambahin gambar / foto di menu drop-down bisa gk, trs caranya gmn,.

    Terima kasih.

  72. rizky Maret 22, 2017 at 11:35 am

    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

    1. Admin Article Author April 2, 2017 at 4:27 am

      json harus dipecah dulu dengan operasi php..

  73. RAP April 13, 2017 at 3:18 am

    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

  74. Ozik April 24, 2017 at 3:47 am

    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

    1. Admin Article Author Mei 7, 2017 at 2:53 am

      silahkan berkreasi gan dengan css

  75. ammar Mei 1, 2017 at 3:29 am

    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?

    1. Admin Article Author Mei 7, 2017 at 2:48 am

      diatas ada dua versi gan, mending langsung download aja gan.. yang versi kedua

  76. Cholis Mei 5, 2017 at 12:20 am

    Mantap min, bisa buat dropdown menu di web ane .. (y)

    1. Admin Article Author Mei 7, 2017 at 2:38 am

      pelajari yang ini gan, agan pasti bisa..

  77. Pulung Riswanto Mei 9, 2017 at 1:56 am

    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.

  78. indra Mei 17, 2017 at 3:56 pm

    halo, bisa tolong saya ngga, lagi belajar bikin data base, utk pendaftaran..pertama user daftar, dan nama user nya tampil. terus user masukin pengikutnya

  79. Arif Mei 31, 2017 at 4:00 am

    terimakasih sangat membantu

  80. khrisna Juni 16, 2017 at 2:26 pm

    gan ane mau bikin dropdown yang horizontal gimana ya gan ? tapi ane disini ga pake edit html tapi dari “tambah gadget” ?

  81. Iwan Juli 21, 2017 at 11:16 am

    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?

    1. Admin Article Author Juni 27, 2018 at 2:28 am

      dengan cara link rel=”stylesheet” type=”text/css” href=”style.css” media=”all” hrefnya arahin tempat agan menympan file css

  82. bejo Desember 1, 2017 at 4:28 am

    gimana cara edit halaman login.. trus kita tambahin am script anda tadi di dreamweaver?

    1. Admin Article Author Juni 25, 2018 at 5:03 am

      Maksudnya?

  83. Muamar Desember 24, 2017 at 10:20 pm

    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?

    1. Admin Article Author Juni 25, 2018 at 4:28 am

      Maaf baru balas, webnya sudah jalan dengan baik.

  84. puri Maret 23, 2018 at 11:19 pm

    Terimakasih infonya, manfaat tuk yang sedang belajar ngeblog

  85. galinggis Mei 31, 2018 at 4:49 am

    saya coba gk jadi gesss,.
    tadi gk keluar warnanya

    1. Admin Article Author Juni 25, 2018 at 3:34 am

      perhatikan cssnya.. terimakasih

  86. sunaan basri Februari 13, 2019 at 7:54 am

    mau tanya gan. itu skrip yang khusus mengatur posisi menunya agar tampilan berjejer ke samping yang mana?

  87. haris Februari 18, 2019 at 1:47 am

    gan kalo biar di croll ke atas atau ke bawah menunya tetap terlihat bagaimana

  88. Sarifudin Maret 26, 2019 at 6:41 pm

    Terima kasih mass kontennya sangat bermanfaat, salam kenal yah mass.

  89. romi Juni 12, 2019 at 3:01 am

    gan cara biar ada tombol panah kebawah nya gimana gan ?

  90. login sekoppoker Oktober 16, 2019 at 3:01 pm

    Thanks Gan..

  91. rafifirjala Februari 29, 2020 at 1:19 am

    kok nggak ada gambar tutorialnya!??

  92. plakat akrilik Agustus 11, 2020 at 2:17 am

    kalo agar menu kategori dropdownnya agar muncul terus gimana kak

  93. cemi November 6, 2020 at 6:47 pm

    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

    1. Admin Article Author Januari 25, 2021 at 5:08 am

      iya Gan, memang sengaja dibuat paten, bisa dirubah cssnya..

  94. Ari Februari 18, 2021 at 1:24 am

    Tx kak atas ilmunya, smg berkah 🙏

  95. Takonn Oktober 24, 2021 at 6:38 pm

    Terima kasih banyak min, sangatlah membantu.

Tinggalkan Balasan

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Apakah elemen dalam HTML yang digunakan untuk membuat drop down list?

Perhatikan pada file menu.html di atas, untuk membuat menu dropdown, element HTML yang kita gunakan adalah element <ul> <li> .

Apa yang dimaksud menu dropdown?

Anda pasti tidak asing dengan istilah dropdown menu. Dropdown menu merupakan sebuah elemen kontrol grafis yang memunculkan daftar agar pengguna dapat memilih salah satu dari daftar menu yang ada.