Jobb klikk menü (context menu) egyedi megoldása
Az alábbi megoldással lehet egy teljes oldalra érvényes vagy akár egyedi almenük megadásával is jobb kattintásos menüt létrehozni a weboldalon.
A működéshez 3 részre van szükség:
HTML kód (alap):
<body oncontextmenu="return false">
<div onmousedown="HideMenu('contextMenu-<?=id?>');" onmouseup="HideMenu('.cmmenu');" oncontextmenu="ShowMenu('contextMenu-<?=id?>',event);">...</div>
Illetve a menü szerkezete:
<div style="display:none;" class="cmmenu" id="contextMenu-<?=$id?>"> <div class="ContextItem">Menü 1</div>
<div class="ContextItem">Menü 2</div>
</div>
Ehhez a szükséges CSS:
div[id^="contextMenu"] {
background-color: #ffffff;
border: 1px solid #cccccc;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.ContextItem {
cursor: pointer;
padding: 8px 15px;
}
.ContextItem:hover {
background-color: #f8f8f8;
}
.ContextItem a {
text-decoration:none;
}
És a legfontosabb, maga a script:
<script language="javascript" type="text/javascript">
function ShowMenu(control, e) {
var posx = e.clientX +window.pageXOffset +'px'; //Left Position of Mouse Pointer
var posy = e.clientY + window.pageYOffset + 'px'; //Top Position of Mouse Pointer
document.getElementById(control).style.position = 'absolute';
document.getElementById(control).style.display = 'inline';
document.getElementById(control).style.left = posx;
document.getElementById(control).style.top = posy;
}
function HideMenu(control) {
document.querySelectorAll(control).forEach(a=>a.style.display = "none");
}
</script>
Néhány szó a működésről:
A fenti kód eredetijét a codeproject.com-on találtam, de az igényeknek és a szélesebb körű felhasználhatóságnak mefgelelően módosítottam.
A "body"-ban elhelyezett "oncontextmenu " paraméter letiltja az oldalon a böngésző saját jobb klikke menüjét.
Ahogyan látható, a context menüt indító hívásokat a legfelső részben kell elhelyezni ahol szeretnénk használni. Ha a teljes oldal, lehet a body vagy valamely "container", ha php-ből foreach-el vagy valamilyen más ciklussal lérehozott soroknál van rá szükség, akkor az adott sor vezérlőjébe kell betenni az első kódblokkot. Itt jelezve is van, pl. hogyan lehet egyedivé tenni az ID-t, hogy a menü és a vezérlés csak rá vonatkozzon.
A "cmenu" osztály bejegyzésre való váltás azért szükséges, hogy bármely más sorra kattintva be lehessen zárni a megnyitott menüt.
A script maga pedig lekéri az egér aktuális pozícióját, majd a paraméterben átadott ID (control) stílusát módosítja. Hogy ne legyen összeakadás, hogy mikor melyik funkciót indítsa, erről gondoskodik az "onmousedown" és az "onmouseup" esemény kezelők. Nyitáshoz pedig az "oncontextmenu" paraméter van használva. Ez direktben a context menü megnyitási szándékra indítja a függvényt.