Để 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
Hình nền máy tính dễ thương: 50 mẫu hình nền cute, chất lượng cao
Hình nền máy tính dễ thương: 50 mẫu hình nền cute, chất lượng cao Với...
Th8
Tích hợp cổng thanh toán PayPal trên WooCommerce mới nhất 2024
Cổng thanh toán PayPal trên WooCommerce – Bạn không biết làm cách nào để sử dụng...
Th10
Khai giảng khóa học corel tháng 4 năm 2023
Khai giảng khóa học corel tháng 4 năm 2023. Bạn đang cần học corel, bạn...
Th4
Chúc mừng ngày Doanh nhân Việt Nam
Đúng ngày này 73 năm về trước – ngày 13/10/1945 – Chủ tịch Hồ Chí...
Th10
Các Chứng Chỉ Tin Học Văn Phòng Phổ Biến & Hữu Dụng Bạn Cần Biết
Các loại chứng chỉ tin học ngày càng được chú trọng và được sử dụng...
Th11
Microsoft ra mắt bộ icon Office mới sau 5 năm
Sau năm 5 giữ nguyên thiết kế, vừa qua Microsoft đã công bố sẽ thay...
Th5
Trung tâm đào tạo chạy quảng cáo facebook ở Bắc Ninh
Trung tâm đào tạo chạy quảng cáo facebook ở Bắc Ninh/ Bắc Giang chuyên nghiệp,...
Th12
Trung tâm đào tạo AutoCad uy tín ở Bắc Ninh
Trung tâm đào tạo AutoCad uy tín ở Bắc Ninh bạn có thể tham khảo...
Th5
Top 6 điểm cắm trại ở Bắc Ninh: Khám phá thiên đường chưa đụng chạm
Bạn ở Bắc Ninh mà chưa bao giờ trải nghiệm cắm trại thì quả là một thiếu...
Th2