Cara Mengkustom Menu Klik Kanan pakai Javascript

Share:

Hello World's! Kalian pernah ngga, pas di suatu laman web, ketika kita klik kanan, yang muncul itu bukan default dari browser, kayak copy, paste, refresh, view source, dan sebagainya. Tapi yang muncul malah opsi-opsi khusus buat laman itu yang notabene beda sama default-nya.

Kita ambil contoh gampang, di situs Blider. Di laman edit slide blider, untuk membuat slide baru kamu harus klik kanan dahulu terus klik "Slide baru". Nah, yang kayak gitu gimana sih cara bikinnnya? Apa kudu pakai platform khusus kayak Node? Atau mungkin harus pakai library tambahan seperti Angular?

Tidak. Bikin kayak gitu bisa pakai pure javascript kok

Pertama, kita buat DOM-nya dulu. Masukkan script ini dimanapun, mau di awal ataupun di akhir sama aja, yang penting didalem <body>.

<ul class="menu-kustom">
     <a href="#"><li>Menu 1</li></a>
     <a href="#"><li>Menu 2</li></a>
     <a href="#"><li>Menu 3</li></a>
</ul>

Selain pakai ul, bisa juga kok pakai div, kalau mau. Selanjutnya, kita masukkan javascript berikut di atas tag penutup body.

........
<script>
$(document).bind("contextmenu", function(event) {
     event.preventDefault();
     $(".menu-kustom").finish().toggle(255)
     .css({
          "top": event.pageY + "px",
          "left": event.pageX + "px"
     });
});
$(document).bind("mousedown", function(e) {
     if(!$(e.target).parents(".menu-kustom").length > 0) {
          $(".menu-kustom").hide(120);
     }
});
</script>
</body>

Untuk fungsi bind sendiri saya ga ngerti buat apa. Setelah saya baca di dokumentasi jQuery, fungsi bind ini udah usang, lebih baik pakai .on(), yang lebih baru. Kalau fungsi on ini dipakai buat event trigger, kayak click, change, atau mungkin hover. Tapi kita pakai .bind() aja.

Oh iya, sebelum nyekrip javascript diatas, pastikan halaman web kita udah terhubung dengan jquery ya. Bisa cari di google ataupun pakai cdn yang sudah saya sediakan ini.

http://cdn.belajarnge.web.id/jquery-3.1.1.js

Nah, biar makin ciamik, sekarang kita percantik secantik ww pakai CSS. Ketikkan css berikut ini di bagian styling.

.menu-kustom {
     display: none;
     z-index: 1200;
     position: absolute;
     overflow: hidden;
     border: 1px solid #ccc;
     white-space: nowrap;
     font-family: Arial;
     background: #fff;
     color: #333;
     border-radius: 6px;
     padding: 0;
     box-shadow: 0px 6px 15px #454545;
}
.menu-kustom li {
     padding: 8px 12px;
     cursor: pointer;
     list-style: none;
     transition: all .3s ease;
     user-select: none;
}
.menu-kustom a { text-decoration: none;color: #444; }
.menu-kustom li:hover { background: #e74c3c; }
.menu-kustom a:hover { color: #fff;

Mantabb... Sekarang, menu klik kanan udah bisa kita kustomisasi dan halaman web kita jadi lebih interaktif dengan bantuan option yang kustom ini. Isinya bisa diubah-suaikan sama masing-masing kebutuhan dengan mengganti list-list (<li>)-nya tadi, script yang pertama. Salam koding!

Ikuti terus aktivitas ngeweb BNI di Instagram yakni di @BelajarNgewebID apabila Anda gabut. Di sana bakalan banyak share kegiatan sang owner BNI yaitu @haloriyan di kala dia kurang kerjaan.

1 komentar: