Chào các bạn quay lại với Blog Codehay.net cũng gần 2 tháng rồi mình không ra bài mới, hôm nay bài viết này mình sẽ chia sẻ code custom menu chuột phải sửa dụng HTML, CSS & JavaScript. Bài gần đây nhất của mình là Chia sẻ code cảnh báo phát hiện AdBlock sử dụng Javascript các bạn có thể truy cập để xem.
Menu chuột phải sẽ hiệu lên khi các bạn click chuột phải vào vị trí bất kì trên website hay blog của bạn. Và trong menu đó sẽ có những lựa chọn mặc định của trính duyệt đã đưa vào.
Trong bài viết này code custom menu chuột phải sẽ thay đổi những tuỳ chọn trong menu khi bấm chuột phải và sẽ ẩn đi khi bạn bấm chuột trái và ở trong menu này sẽ có thêm một menu phụ nữa. Các bạn có thể xem demo dưới đây:
Chia sẻ code custom menu chuột phải trên website/blog
Để custom menu chuột phải trên website/blog các bạn cần phải chèn những đoạn code HTML, CSS & JavaScript dưới đây vào website/blog của bạn.
Đầu tiên, chèn đoạn HTML dưới đây:
<div class='context-menu-wrapper'> <div class='context-menu-content'> <ul class='menu'> <li class='item'> <i class='fa-solid fa-eye'></i> <span>Preview</span> </li> <li class='item share'> <div> <i class='fa-solid fa-share'></i> <span>Share</span> </div> <ul class='share-menu'> <li class='item'> <i class='fa-brands fa-twitter'></i> <span>Twitter</span> </li> <li class='item'> <i class='fa-brands fa-instagram'></i> <span>Instagram</span> </li> <li class='item'> <i class='fa-solid fa-basketball'></i> <span>Dribble</span> </li> <li class='item'> <i class='fa-brands fa-telegram'></i> <span>Telegram</span> </li> </ul> </li> <li class='item'> <i class='fa-solid fa-link'></i> <span>Get Link</span> </li> <li class='item'> <i class='fa-solid fa-pen-to-square'></i> <span>Rename</span> </li> <li class='item'> <i class='fa-solid fa-trash-can'></i> <span>Delete</span> </li> </ul> </div> </div>
Tiếp theo chèn CSS:
<style> .context-menu-wrapper{visibility:hidden;position:absolute;width:300px;border-radius:4px;background:#fff;box-shadow:0 12px 35px rgba(0,0,0,0.1);z-index:9999999999999} .context-menu-wrapper .menu{padding:5px 0;margin:0!important} .context-menu-content .item{list-style:none;font-size:18px;height:30px;display:flex;width:100%;cursor:pointer;align-items:center;padding:0 10px} .context-menu-content .item:hover{background:#f2f2f2} .context-menu-content .item span{margin-left:8px;font-size:15px} .context-menu-content .item i{font-size:14px} .context-menu-content .share{position:relative;justify-content:space-between} .share .share-menu{position:absolute;background:#fff;width:200px;right:-200px;top:-35px;padding:5px 0;opacity:0;pointer-events:none;border-radius:4px;margin:0!important;box-shadow:0 5px 10px rgba(0,0,0,0.08);transition:.2s ease} .share:hover .share-menu{opacity:1;pointer-events:auto} </style>
Và chèn thêm thư viên font awesome mới nhất:
<link href='https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro-v6@18657a9/css/all.min.css' rel='stylesheet' type='text/css'/>Cuối cùng, chèn đoạn JavaScript này vào tiếp website/blog của bạn:
<script>//<![CDATA[ const contextMenu = document.querySelector(".context-menu-wrapper"), shareMenu = contextMenu.querySelector(".share-menu"); window.addEventListener("contextmenu", e => { e.preventDefault(); let x = e.offsetX, y = e.offsetY, winWidth = window.innerWidth, winHeight = window.innerHeight, cmWidth = contextMenu.offsetWidth, cmHeight = contextMenu.offsetHeight; if(x > (winWidth - cmWidth - shareMenu.offsetWidth)) { shareMenu.style.left = "-200px"; } else { shareMenu.style.left = ""; shareMenu.style.right = "-200px"; } x = x > winWidth - cmWidth ? winWidth - cmWidth - 5 : x; y = y > winHeight - cmHeight ? winHeight - cmHeight - 5 : y; contextMenu.style.left = `${x}px`; contextMenu.style.top = `${y}px`; contextMenu.style.visibility = "visible"; }); document.addEventListener("click", () => contextMenu.style.visibility = "hidden"); //]]></script>
Xong!
Lời kết
Đây là tất cả source code để bạn có thể custom menu chuột phải trên website/blog của mình bằng cách sử dụng HTML, CSS và JavaScript. Nếu trong quá trình thực hiện gặp lỗi hay code không hoạt động các bạn có thể comment xuống phía dưới mình sẽ phản hồi và giúp đỡ bạn sớm nhất!
