Để tạo một menu tùy chỉnh khi người dùng click chuột phải trên website, bạn cần sử dụng JavaScript để bắt sự kiện click chuột phải và hiển thị menu tương ứng. Dưới đây là một ví dụ đơn giản về cách làm điều này:
HTML: Tạo một cấu trúc HTML cơ bản cho menu.
Đoạn mã cơ bản
<!DOCTYPE html><html lang=”en”><head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Custom Context Menu</title>
<style>.custom-menu {display: none;position: absolute;background-color: #f9f9f9;border: 1px solid #ccc;min-width: 120px;z-index: 1;}
.custom-menu-item {padding: 8px 12px;cursor: pointer;}.custom-menu-item:hover {background-color: #f1f1f1;}</style></head><body>
<div class=”custom-menu” id=”context-menu”>
<div class=”custom-menu-item” id=”menu-item-1″>Menu Item 1</div>
<div class=”custom-menu-item” id=”menu-item-2″>Menu Item 2</div>
<div class=”custom-menu-item” id=”menu-item-3″>Menu Item 3</div>
</div>
<div id=”main-content”>
<h1>Right-click here to see the custom context menu</h1>
</div><script>
// JavaScript code to show custom context menu
const contextMenu = document.getElementById(‘context-menu’);
const mainContent = document.getElementById(‘main-content’);
mainContent.addEventListener(‘contextmenu’, function (event) {
event.preventDefault();
contextMenu.style.display = ‘block’;
contextMenu.style.left = event.pageX + ‘px’;
contextMenu.style.top = event.pageY + ‘px’;
});
document.addEventListener(‘click’, function () {
contextMenu.style.display = ‘none’;
});
</script>
</body></html>
Trong ví dụ trên, khi bạn chuột phải vào khu vực main-content, một menu tùy chỉnh sẽ xuất hiện tại vị trí click chuột. Menu này sẽ biến mất khi bạn click vào bất kỳ đâu trên trang web.
Hãy chắc chắn rằng bạn sử dụng các phần tử HTML và CSS này trong một tệp HTML đầy đủ để chạy đúng cách trên trình duyệt web.
<div id=”contextMenu” class=”context-menu” style=”display: block; top: 3709px; left: 1435px;”>
<ul>
<li><i class=”fa-solid fa-clipboard-question” aria-hidden=”true”></i><strong style=”color:#8800ff”> Bạn cần hỗ trợ… </strong></li>
<a title=”Thiết kế website chuẩn SEO” href=”/thiet-ke-website-chuyen-nghiep/” target=”_blank”><li><i class=”fa fa-info-circle” aria-hidden=”true”></i> Thiết kế Website</li></a>
<a title=”Dịch vụ SEO tổng thể” href=”/dich-vu-seo-tong-the/” target=”_blank”><li><i class=”fa fa-info-circle” aria-hidden=”true”></i> SEO tổng thể</li></a>
<a title=”Marketing Online” href=”/phong-marketing-thue-ngoai/” target=”_blank”><li><i class=”fa fa-info-circle” aria-hidden=”true”></i> Marketing Online</li></a>
</ul>
<ul class=”menu-lh”>
<li><i class=”fa-solid fa-face-smile-wink” aria-hidden=”true”></i><strong style=”color:#8800ff”>
Đừng ngại vào …</strong></li>
<a title=”Zalo” href=”https://zalo.me/0988897680″_blank”><li><i class=”fa fa-comments” aria-hidden=”true”></i> Zalo</li></a>
<a title=”Telegram” href=”https://t.me/kinhbacweb” target=”_blank”><li><i class=”fab fa-telegram” aria-hidden=”true”></i> Telegram</li></a>
</ul>
<ul class=”menu-lh”>
<li><strong style=”color:#FF643A”>www.KinhBacWeb.Com</strong></li>
</ul>
</div>
<style>
.context-menu {display: none; position: absolute; background-color: #fff; padding: 15px; z-index: 999; border-radius: 10px; width: 238px; box-shadow: 0px 0px 7px #00000038; animation: popup 0.5s;}
.context-menu ul {list-style-type: none; margin: 0px; padding: 0px;}
.context-menu a{text-decoration: none;}
#contextMenu ul li {padding:5px 20px;}
#contextMenu ul li:hover{background:#ccc; padding:5px 20px; border-radius:7px;}
#contextMenu ul li i{margin-right:7px; color:#8800ff;}
ul.menu-lh {border-top: 2px solid #ccc; padding-top: 10px; margin-top: 10px;}
</style>
<script src=”data:text/javascript;base64,ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY29udGV4dG1lbnUnLChldmVudCk9PntldmVudC5wcmV2ZW50RGVmYXVsdCgpO2NvbnN0IGNvbnRleHRNZW51PWRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjb250ZXh0TWVudScpO2NvbnN0IG1vdXNlWD1ldmVudC5jbGllbnRYK3dpbmRvdy5wYWdlWE9mZnNldDtjb25zdCBtb3VzZVk9ZXZlbnQuY2xpZW50WSt3aW5kb3cucGFnZVlPZmZzZXQ7Y29uc3QgcGFnZVdpZHRoPWRvY3VtZW50LmJvZHkuc2Nyb2xsV2lkdGg7Y29uc3QgcGFnZUhlaWdodD1kb2N1bWVudC5ib2R5LnNjcm9sbEhlaWdodDtjb25zdCBtZW51V2lkdGg9Y29udGV4dE1lbnUub2Zmc2V0V2lkdGg7Y29uc3QgbWVudUhlaWdodD1jb250ZXh0TWVudS5vZmZzZXRIZWlnaHQ7bGV0IGFkanVzdGVkWD1tb3VzZVg7bGV0IGFkanVzdGVkWT1tb3VzZVk7aWYobW91c2VYK21lbnVXaWR0aD5wYWdlV2lkdGgpe2FkanVzdGVkWD1wYWdlV2lkdGgtbWVudVdpZHRofQppZihtb3VzZVkrbWVudUhlaWdodD5wYWdlSGVpZ2h0KXthZGp1c3RlZFk9cGFnZUhlaWdodC1tZW51SGVpZ2h0fQpjb250ZXh0TWVudS5zdHlsZS5kaXNwbGF5PSdibG9jayc7Y29udGV4dE1lbnUuc3R5bGUudG9wPWAke2FkanVzdGVkWX1weGA7Y29udGV4dE1lbnUuc3R5bGUubGVmdD1gJHthZGp1c3RlZFh9cHhgfSk7ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCgpPT57Y29uc3QgY29udGV4dE1lbnU9ZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NvbnRleHRNZW51Jyk7Y29udGV4dE1lbnUuc3R5bGUuZGlzcGxheT0nbm9uZSd9KQ==” defer=””>
</script>
Các bạn copy toàn bộ code trên nhúng vào phần chèn mã code tuỳ chỉnh được hỗ trợ trên theme hoặc chèn vào các vị trí trong phần tử webiste chân trang
Nếu dùng mã nguồn WordPress thì có thể tham khảo các công cụ Plugin Insert Header And Footer trong kho thư viện plugin miến phí của WordPress hoặc một số theme hỗ trợ như mẫu theme Flatsome chúng tôi đang dùng:
Tuỳ chỉnh Menu theo ý muốn
Tuỳ chính Menu với phần nội dung chữ (text) và phần CSS màu sắc chỉnh mã màu trong phần code trên để được đẹp mắt và phù hợp với website của các bạn nhé
- Thêm nút Menu
- Thêm link website vào menu
- Điều chỉnh màu sắc
- Đổi biểu tượng vằng mà font Awesome
Chèn Code Vào Theme Hỗ Trợ
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Đăng ký học Nhận tư vấnBài viết liên quan
Tải miễn phí file thiết kế lịch 2025 đầy đủ bộ số âm dương (file PSD Photoshop gốc)
Bạn đang tìm kiếm một bộ file thiết kế lịch 2025 hoàn chỉnh, dễ chỉnh...
Th11
Khóa học PhotoShop cơ bản ở Bắc Ninh/ Bắc Giang uy tín
Khóa học PhotoShop cơ bản ở Bắc Ninh/ Bắc Giang chất lượng uy tín. Khóa...
Th4
Chia sẻ bộ Font chữ Viêt SVN và Pack typo 20/10
Pack 6 file Typography Ngày phụ nữ Việt Nam 20/10 Pack 6 file Typography Ngày...
Th12
Khóa tin học cho doanh nghiệp ở Bắc Ninh/ Bắc Giang
IHappy là đơn vị đào tạo tin học và công nghệ thông tin cho doanh...
Th3
Download Photoshop 2023 Full cho Mac OS | Hướng dẫn cài
Adobe Photoshop CC 2023 cho MacOS hỗ trợ đồ họa từ áp phích đến bao...
Trung tâm AutoCad ở Bắc Ninh-Học đồ họa chuyên nghiệp
Trung tâm AutoCAD ở Bắc Ninh là địa chỉ đáng tin cậy để nâng cao...
Th5
Học ghép ảnh chuyên nghiệp với photoshop
KHÓA HỌC PHOTOSHOP GHÉP ẢNH CHUYÊN NGHIỆP VỚI PHOTOSHOP KHÓA HỌC PHOTOSHOP GHÉP ẢNH CHUYÊN...
Th6
Khai giảng lớp học chạy quảng cáo facebook ở Bắc Ninh
Hiện nay việc chạy quảng cáo face book là vô cùng cần thiết cho nhiều...
Th6
Đào tạo tin học văn phòng cho người mới bắt đầu ở Bắc Ninh
Đào tạo tin học văn phòng cho người mới bắt đầu ở Bắc Ninh. Bạn...
Th3