HTML Browser Kontextmenü designen

Question

Kann ich das Design von dem Kontextmenü ändern wenn man einen Rechtsklick macht?

Answer 1

Das Kontextmenü wird normalerweise vom Browser selbst verwaltet, und in den meisten Fällen können Sie das Aussehen und die Funktionalität nicht direkt ändern. Allerdings gibt es eine Methode, mit der Sie das Standard-Verhalten des Browser ändern können. Sie können mit

preventDefault()

bestimmte Events (wie z.B die Anzeige des Kontextmenü bei einem Rechtsklick) unterdrücken und ein benutzerdefiniertes HTML Menü anzeigen.

<style>
.menu {
    display: none;
    position: absolute;
    border: 1px solid black;
    background-color: rgb(244, 239, 210);
}

.option {
    padding: 5px;
}
</style>

<div class="menu">
    <div class="option"><a href="#">Option 1</a></div>
    <div class="option"><a href="#">Option 2</a></div>
    <div class="option"><a href="#">Option 3</a></div>
</div>

<script>
const menu = document.querySelector(".menu");

document.addEventListener("contextmenu", (event) => {
    event.preventDefault();
    menu.style.display = "block";
    menu.style.left = `${event.clientX}px`;
    menu.style.top = `${event.clientY}px`;
});

document.addEventListener("click", () => {
    menu.style.display = "none";
});
</script>