Kali ini kita akan mencoba modifikasi tampilan menu atau biasa disebut context menu ketika melakukan klik kanan pada Touch pad / Mouse hanya menggunakan HTML, CSS, dan Javascript.
Context Menu adalah menu yang muncul saat Anda klik kanan, kemudian akan menampilkan beberapa Opsi. Opsi yang tersedia biasanya adalah Event yang terkait dengan objek yang dipilih.

 Pertama, Anda harus membuat file dengan ekstensi .html (contoh: index.html), kemudian tambahkan script html dibawah ini.
<pre>&lt;!DOCTYPE html&gt;</pre>
<pre>&lt;html lang="en"&gt;</pre>
<pre> &lt;head&gt;</pre>
<pre> &lt;title&gt;Modifikasi Klik Kanan&lt;/title&gt;</pre>
<pre> &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;</pre>
<pre> &lt;/head&gt;</pre>
<pre> &lt;body&gt;</pre>
<pre> &lt;div class="h-screen flex justify-center items-center"&gt;</pre>
<pre> Klik kanan pada Touch Pad/Mouse Anda</pre>
<pre> &lt;/div&gt;</pre>
<pre></pre>
<pre> &lt;div</pre>
<pre> id="rightClickMenu"</pre>
<pre> class="absolute rounded w-52 drop-shadow-lg bg-slate-50 text-sm border hidden py-1"</pre>
<pre> &gt;</pre>
<pre> &lt;div class="hover:bg-gray-200 px-2 cursor-pointer py-1"&gt;Full Screen&lt;/div&gt;</pre>
<pre> &lt;div class="hover:bg-gray-200 px-2 cursor-pointer py-1"&gt;Copy&lt;/div&gt;</pre>
<pre> &lt;div class="hover:bg-gray-200 px-2 cursor-pointer py-1"&gt;Paste&lt;/div&gt;</pre>
<pre> &lt;div</pre>
<pre> class="hover:bg-gray-200 px-2 cursor-pointer py-1 border-t-2 border-zinc-300"</pre>
<pre> &gt;</pre>
<pre> Go to</pre>
<pre> &lt;a href="https://dumbways.id" target="_blank" class="hover:text-sky-600"</pre>
<pre> &gt;Dumbways.id&lt;/a</pre>
<pre> &gt;</pre>
<pre> &lt;/div&gt;</pre>
<pre> &lt;/div&gt;</pre>
<pre> &lt;/body&gt;</pre>
<pre>&lt;/html&gt;</pre>


Kedua, Tambahkan Script Javascript diatas element penutup &lt;/body&gt;
<pre><code>&lt;script&gt; </code></pre>
<pre><code> document.oncontextmenu = rightClick; </code></pre>
<pre><code> </code></pre>
<pre><code> function rightClick(e) { </code></pre>
<pre><code> e.preventDefault(); </code></pre>
<pre><code> const menu = document.getElementById('rightClickMenu'); </code></pre>
<pre><code> menu.classList.add('block'); </code></pre>
<pre><code> menu.classList.remove('hidden'); </code></pre>
<pre><code> menu.style.left = e.pageX + 'px'; </code></pre>
<pre><code> menu.style.top = e.pageY + 'px'; </code></pre>
<pre><code> } </code></pre>
<pre><code>&lt;/script&gt;</code></pre>



Full Code: <a href="https://github.com/demo-dumbways/article-custom-right-click/blob/master/index.html" target="_self">Click here </a>&nbsp;
Demo: <a href="https://article-custom-right-click.vercel.app/" target="_self">Click here</a>&nbsp;

Kali ini kita akan mencoba modifikasi tampilan menu atau biasa disebut context menu ketika melakukan klik kanan pada Touch pad / Mouse hanya menggunakan HTML, CSS, dan Javascript.

Cara modifikasi tampilan menu klik kanan