ساخت منو راست در جاوا اسکریپت
برای ایجاد یک منوی راست‌کلیک در وبسایت خود با استفاده از جاوا اسکریپت، مراحل زیر را دنبال کنید. این منو به شما امکان می‌دهد تا گزینه‌های خاصی را برای کاربران خود فراهم کنید، که می‌تواند شامل گزینه‌های مختلفی باشد.
مرحله ۱: ایجاد HTML پایه
ابتدا یک ساختار HTML ساده بسازید. این شامل یک عنصر برای منو و محتوای اصلی صفحه است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="contextMenu" class="context-menu">
<ul>
<li id="option1">گزینه ۱</li>
<li id="option2">گزینه ۲</li>
<li id="option3">گزینه ۳</li>
</ul>
</div>
<div id="content">
راست‌کلیک کنید تا منو ظاهر شود.
</div>
<script src="script.js"></script>
</body>
</html>
```
مرحله ۲: اضافه کردن CSS
سپس برای منو، CSS اضافه کنید تا آن را زیباتر کنید و پنهان نگه‌دارید تا زمانی که کاربر راست‌کلیک کند.
```css
.context-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
z-index: 1000;
}
.context-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.context-menu li {
padding: 8px 12px;
cursor: pointer;
}
.context-menu li:hover {
background-color: #f0f0f0;
}
```
مرحله ۳: نوشتن جاوا اسکریپت
حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد. این کد برای نمایش منو در مکان مناسب و پنهان‌کردن آن در مواقع دیگر استفاده می‌شود.
```javascript
document.addEventListener("contextmenu", function(e) {
e.preventDefault();
const menu = document.getElementById("contextMenu");
menu.style.display = "block";
menu.style.left = e.pageX + "px";
menu.style.top = e.pageY + "px";
});
document.addEventListener("click", function() {
const menu = document.getElementById("contextMenu");
menu.style.display = "none";
});
```
نتیجه‌گیری
با دنبال کردن این مراحل، شما قادر خواهید بود یک منو راست‌کلیک ساده و کارآمد بسازید. این منو می‌تواند به راحتی با اضافه کردن گزینه‌های بیشتر یا تغییر در استایل CSS، شخصی‌سازی شود. اگر سوالی دارید یا نیاز به توضیحات بیشتری دارید، خوشحال می‌شوم که کمک کنم!
