Hi Sobat Digital! Ada sebuah desain menu yang saat ini terkadang digunakan di beberapa website baik di perangkat dekstop maupun perangkat seluler yaitu menu di luar kanvas.
Di artikel ini, kami akan membuat tutorial contoh pembuatan menu diluar kanvas yang menggunakan CMS WordPress dan plugin Oxygen Builder.
Latar belakang dari penulisan tutorial ini karena ada salah satu anggota dari Facebook Groups Oxygen Builder yang bertanya tentang bagaimana cara membuat menu di luar kanvas seperti yang dia inginkan dengan desain merujuk kepada website lain.
Kemudian kami mencoba membuatnya sebagai contoh bahwa Oxygen Builder (tanpa addons) bisa juga digunakan dalam pembuatan menu canvas seperti itu walaupun tidak 100% mirip karena masih ada kekurangannya. Tetapi orang tersebut mengatakan bahwa contoh yang kami buat sudah sesuai dengan yang dia inginkan dan bertanya bagaimana cara pembuatannya.
Baca juga: Oxygen Builder, Plugin Page Builder WordPress Terbaik?
Kami secara pribadi sudah berdiskusi dan memberikan beberapa petunjuk singkat tentang cara pembuatan canvas menu, namun diluar itu kami juga ingin berbagi lebih detail untuk umum tentang cara pembuatannya melalui artikel ini karena kami merasa bahwa banyak sekali pengetahuan yang dapat kami pelajari dari group tersebut dan itu membuat kami berpikir untuk membagikan kembali sedikit pengetahuan ini kepada orang lain.
Menu di luar kanvas adalah sebuah desain menu yang akan muncul ketika kita mengklik suatu elemen dan biasanya muncul dengan efek geser (slide) karena itulah dianggap sebagai di luar kanvas.
Kelebihan menu di luar kanvas adalah kita bisa menghemat tempat dari layar yang ada karena hanya perlu 1 elemen kecil sebagai pemicu untuk memunculkan sebuah komponen yang lebih besar dan bisa berisi berbagai banyak elemen lainnya termasuk diantaranya adalah elemen menu.
Website kami ini juga menggunakan menu di luar kanvas 😀
Catatan: Desain yang kami gunakan sebagai referensi berasal dari website lain (minifyme.co.uk). Kami menggunakannya sebagai contoh untuk keperluan tutorial ini.
Untuk tutorial ini, desain yang akan menjadi referensi dan telah kami buat sebelumnya adalah seperti video dibawah :
Ada beberapa catatan yang perlu mendapat perhatian anda pada video tutorial yang kami buat, diantaranya adalah:
<!-- --> // mengosongkan elemen HTML dari "Hello World"
Loading.../* menghapus border pada input search */
#s {border:none;}
/* menghilangkan border ketika kita mengklik input search */
#s:focus {outline:none;}
/* menghapus tombol submit pada search (GO button) */
.oxy-search-form input[type="submit"] {display:none;}
/* membuat cursor pada icon search menjadi pointer (dapat di klik) */
#searchicon {cursor: pointer;} // mengganti fungsi submit button dengan icon yang memiliki id searchicon
jQuery('#searchicon').on('click', function() {
jQuery('#searchsubmit').click();
});Demikian tutorial tentang cara membuat menu di luar kanvas dengan WordPress yang menggunakan plugin Oxygen Builder.
Bagaimanapun juga apa yang telah kami buat hanyalah contoh sangat sederhana yang perlu dimodifikasi sesuai kebutuhan anda, misalnya bisa anda tambahkan ikon sosial media, keranjang belanja, kontak form ataupun elemen lainnya.
Dari tutorial ini, kita bisa melihat bahwa plugin Oxygen Builder adalah salah satu plugin builder yang sangat flexible, tanpa tambahan plugin atau addon lainnya kita sudah bisa membuat menu di luar kanvas.
Kami percaya bahwa pembuatan menu di luar kanvas ini ketika ditambah dengan ide yang orisinil, kreatifitas, imajinasi dan desain yang bagus, bisa menjadi sesuatu yang sangat menarik dan fungsional bagi pengunjung.
Bagaimana menurut anda? Apakah membuat menu di luar kanvas secara manual seperti ini termasuk sulit? Mungkin anda lebih memilih menggunakan plugin jadi ataupun teknik lainnya? Silahkan berikan pendapat anda dibawah.
Salam Digital!