Cara Membuat Menu Responsif Fullscreen di WordPress
- Edi Sumarsono
- Jan 20, 2016
- 2 min read
Cara Membuat Menu Responsif Fullscreen di WordPress – Mungkin Anda pernah mengunjungi beberapa situs populer yang mempunyai menu responsif fullscreen, menu ini muncul di situs dengan ikon garis-garis atau yang dikenal dengan menu hamburger. Ketika pengguna mengklik atau icon tersebut, overlay fullscreen yang berisi menu situs muncul dengan efek slide atau efek keren lainnya.
Jika Anda ingin membuat menu seperti tersebut di situs WordPress Anda, maka pada artikel kali ini, saya akan menunjukkan cara untuk menambahkan menu responsif fullscreen di WordPress dengan mudah yaitu menggunakan plugin.
Menambahkan Menu Responsive Fullscreen
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin DC Fullscreen Responsif Menu. Setelah plugin Anda aktifkan, silahkan masu ke menu Appearance » DC Fullscreen Menu untuk melakukan pengaturan plugin seperti gambar dibawah ini.
Pilih menu yang ingin Anda jadikan fullscreen dari menu daftar drop-down di Menu List seperti gambar diatas. Jika Anda belum membuat belum menu navigasi, Silahkan buat terlebih menu untuk situs Anda.
Setelah itu, Anda harus memilih arah efek slide-in untuk menu fullscreen. Anda dapat memilih efek slide muncul dari atas, kanan, kiri, bawah, atau juga tanpa effect.
DC Fullscreen menu Responsif juga mempunyai pengaturan tampilan warna background dan warna teks. Pilih kombinasi warna sesuai dengan situs Anda atau pilih sesuai selera sehingga cocok dengan situs WordPress Anda. Selain itu Anda juga dapat memilih Google Font untuk teks menu. Cukup masukkan nama font, dan plugin akan otomatis menyesuaikan sesuai dengan pilihan Anda tersebut.
Jangan lupa untuk menghilangkan kotak centang di samping opsi “Tiny Link to Author”. Jika dibiarkan tetap di centang, itu akan menambahkan link menuju ke website si pembuat plugin pada semua halaman Anda.
Terakhir, klik pada tombol Submit untuk menyimpan pengaturan. Sekarang Anda dapat mengunjungi situs web Anda untuk melihat menu tersebut terpasang dengan baik. Coba juga untuk merubah ukuran browser ke berbagai ukuran perangkat untuk melihat bagaimana menu terlihat pada ukuran layar yang berbeda.
Saya harap artikel ini membantu Anda menambahkan menu responsif fullscreen ke situs WordPress Anda. Silahkan di coba dan semoga bermanfaat. 🙂
Comments