Cara Mengatasi Menu Dropdown Blog Tidak Bisa Diklik / Rusak
Cara Mengatasi Menu Dropdown Blog Tidak Bisa Diklik / Rusak

Pada tutorial kali ini saya ingin membahas cara mengatasi menu dropdown di blog yang tidak bisa diklik, alias rusak atau tidak work. Bukan cuma anda, saya juga pernah mengalaminya, oleh karena itu saya mencari dan telah mendapatkan solusi nya.

Saya bisa katakan 98% template blogger yang bertebaran di internet memiliki fitur menu dropdown di bawah headernya. Bukan tanpa beralasan, menu dropdown memiliki peranan yang sangat penting, diantaranya sebagai tempat untuk menaruh halaman-halaman penting dari blog seperti kontak, about, disclaimer, dan masih banyak lagi

Ketika pemilik template yang memiliki dropdown ingin mengoptimasi kecepatan loading blognya, ia akan menemui beberapa efek samping, salah satu diantaranya yang membuat cukup pusing bagi pemula ialah menu dropdown yang rusak, bahkan terkadang hilang.

Maksud menu dropdown yang rusak ialah menu yang tidak mau muncul ketika sudah di klik, biasanya terjadi pada pengguna mobile

Mari kita pelajari penyebab dan solusi untuk masalah ini...

Menu Dropdown Tidak Bisa Diklik / Rusak / Error


Setelah saya telusuri lebih dalam, ternyata penyebab utamanya dikarenakan 2 hal;
  1. Menu dropdown yang saya pakai memerlukan jQuery
  2. Saya membuat jQuery menjadi ASYNC
Tentu saja menu dropdown saya rusak, dikarenakan saya membuat jQuery diload secara ASYNC (agar tidak terkena masalah Render Blocking jQuery di PageSpeed Insights), sedangkan menu dropdown yang saya pakai memerlukan jQuery yang asli, tanpa diedit edit.

Biasanya menu dropdown yang menggunakan jQuery adalah dari template Arlina, seperti Simplify, Infinite, dan sebagainya. Sedangkan yang menunya hilang ketika jQuery dibuat ASYNC adalah template EvoMagz karya Mas Sugeng.

Tentu anda sudah mengetahui cara mengatasinya, yaitu dengan menghilangkan atribut ASYNC di jQuery nya. Biasanya terletak didalam tag head. Hapus kode yang saya mark kuning berikut:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

Tetapi hal tersebut tentu akan menambah masalah Render Blocking, sehingga loading blog menjadi lambat dan skor menjadi jelek.

Jadi cara terakhir yang dapat anda pakai adalah menggunakan menu dropdown yang Pure CSS, alias tidak memakai segala jenis Javascript sama sekali.

Memang, menu dropdown pure CSS memiliki beberapa kekurangan dibanding menu dropdown yang menggunakan Javascript, seperti tampilan yang terlalu mono, biasa, tidak bisa diberi animasi yang bagus, serta untuk mengedit menunya lumayan sulit.

Tapi menurut saya tidak apa-apa, yang penting loading blog anda cepat...
Silakan pilih sistem komentar anda ⇛   

4 komentar untuk Cara Mengatasi Menu Dropdown Blog Tidak Bisa Diklik / Rusak.

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Dzkry A Kode Jarwo
Dzkry A
# 9 April 2018 17.25

Wokeh.. Maap baru tau ada halaman pertanyaan

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 8 April 2018 18.05

Sudah jadi artikelnya, cek di Menu Dropdown Pure CSS. Nanti kalau mau request artikel lewat Halaman Pertanyaan aja ya supaya afdol...

Balas
Dzkry A Kode Jarwo
Dzkry A
# 7 April 2018 02.03

Request Cara buat menu dropdown pake pure css bang.. Lumayan buat ilangin jquery nya

Balas
Ferry Ardian Kode Jarwo
Ferry Ardian
# 10 Februari 2018 19.30

wah makasih bang nice info

Balas