tips-trik-html-membuat-menu-dropdown-Nyekrip

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.

tips-trik-html-membuat-menu-dropdown-hasil-akhir-Nyekrip

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:

cara-membuat-menu-dropdown-sederhana-nyekrip-v2

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.

Didalam wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar link tersebut kita bungkus dengan tag <ul> dan tag <li>:

Karena kita akan menggunakan eksternal CSS, maka tambahkan skrip berikut dalam tag head:

Sehingga skrip akhir kita menjadi seperti ini:

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:

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:

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:

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

Comments

  1. Fuad L.

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

  2. rudhytheart

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

  3. Reynaldo

    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

      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

        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

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

    1. Admin Article Author

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

  4. jonggi

    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.

  5. indria

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

  6. fatimah

    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

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

  7. ahmad

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

  8. syafi alqudsy

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

  9. agus prasetyo

    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?

  10. Muhib

    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

  11. Yudhis

    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

  12. febi

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

    jadinya kok cuman gini 🙁

  13. Kirana Putri

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

  14. Josprima Sihombing

    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

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

  15. Khasna Khasna

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

    jangan lupa berkunjung juga di solosoloku blogspot com

    1. Admin Article Author

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

  16. abidin

    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

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

  17. dede

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

  18. Fikriadi

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

  19. anwar

    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?

  20. yuar

    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.

  21. anis

    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

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

  22. Ivan Dhzokhar

    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

  23. Alfredo Sinaga

    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

      “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

  24. jatmiko

    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

  25. Anak Tkj

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

  26. Levi Tanrio

    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

      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?

  27. ilyas

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

  28. rizky

    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

  29. RAP

    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

  30. Ozik

    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

  31. ammar

    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?

  32. Pulung Riswanto

    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.

  33. indra

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

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *