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