Để 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
Nhân viên thiết kế website cần có tố chất gì? Yêu cầu công việc thiết kế website cần có
Công việc của một nhân viên thiết kế website chuyên nghiệp là gì? Dưới đây...
Tìm hiểu công cụ text trong Photoshop
Công cụ Text trong Photoshop Công cụ Text trong Photoshop- Với mọi phần mềm, text...
Th5
52 học sinh và 3 giáo viên tử vong, nhiều người mất tích sau bão số 3
Bộ GD&ĐT và Công đoàn Giáo dục Việt Nam vẫn tiếp tục kêu gọi, vận...
Th9
Tổng hợp chia sẻ mẫu Banner và Lời chúc ngày Doanh nhân Việt Nam 13/10 hay nhất
Ý nghĩa của ngày Doanh Nhân Việt Nam là để nhằm tôn vinh những đóng...
Th10
Chia sẻ về trung tâm đào tạo AutoCad cơ bản ở Bắc Ninh tốt
Bạn đang tìm cho mình cơ sở học Autocad ở Bắc Ninh hay 1 trung...
Th3
Trung tâm đào tạo AutoCad ở Bắc Ninh – Nâng tầm năng lực
Dưới đây là một số từ khóa tìm kiếm liên quan đến trung tâm đào...
Th4
6 cách xoay, lật hình trong Adobe Illustrator-Rotate & Reflect AI
Khi sử dụng phần mềm thiết kế Adobe Illustrator thì việc xoay và lật hình...
Th4
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ẻ file thiết kế banner nghỉ lễ Giải Phóng Miền Nam 30/04 – 01/05
Chia sẻ file thiết kế banner nghỉ lễ Giải Phóng Miền Nam 30/04 – 01/05...
Th4