Để 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ợ
Bài viết liên quan
Muôn kiểu camera tự lắp của anh em mmua hàng online
Hướng dẫn tự lắp camera tại nhà đơn giản, tiết kiệm không như thợ Lựa...
Th10
Công ty OFFER lương cho bạn dựa vào đâu?
Công ty OFFER lương cho bạn dựa vào đâu? Nguồn tiền Công ty có mô...
Th5
Đào tạo tin học văn phòng học ở đâu Bắc Ninh uy tín và lợi ích nó mang lại
Học Tin học văn phòng là một kỹ năng quan trọng trong thời đại công...
Th8
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
Địa chỉ trung tâm đào tạo Corel ở thành phố Bắc Ninh
Corel là một phần mềm thiết kế đồ họa 2d được áp dụng trong thiết...
Th7
Khai giảng lớp tin học văn phòng tháng 6 ở Bắc Ninh
Trung Tâm Đào Tạo IHappy ở Bắc Ninh Địa chỉ: Đường Bình Than, Khu khả...
Th6
Giấy duplex nhập khẩu giá rẻ: Xu hướng mới trong ngành giấy Việt Nam
Giấy duplex là một trong những sản phẩm chất liệu quan trọng trong ngành in...
Th10
Khóa tin học văn phòng nâng cao ở Tiên Sơn Bắc Ninh số 1
Khóa tin học văn phòng nâng cao ở Tiên Sơn Bắc Ninh số 1 với...
Th3
Chia sẻ bộ Font chữ ký tuyệt đẹp SignRathi V2
Font chữ ký đẹp Sign Rathi là một phông chữ viết tay mảnh và đẹp...
Th6