浏览器内部的半导航菜单

问题描述 投票:0回答:1

我已经用HTML创建了自己的上下文菜单。效果很好,但是当我打开右边的菜单时,其中一半在里面。有没有一种方法可以检查它,然后将其添加到鼠标位置的顶部?

这里的图片看起来如何:https://media.discordapp.net/attachments/648794604132499459/707151713542602792/unknown.pnghttps://media.discordapp.net/attachments/648794604132499459/707151701483978842/unknown.png

这里输入我的代码:

Javascript:

const cm = document.querySelector(".custom-cm");
function showContextMenu(show = true) {
   cm.style.display = show ? "block" : "none";
}
window.addEventListener("contextmenu", e => {
   e.preventDefault();
   showContextMenu();
   cm.style.top = e.y + "px" + cm.offsetHeight > window.innerHeight ? window.innerHeight - cm.offsetHeight : e.y + "px";
   cm.style.left = e.x + "px" + cm.offsetWidth > window.innerWidth ? window.innerWidth - cm.offsetWidth : e.x + "px";
});
window.addEventListener("click", () => {
   showContextMenu(false);
});

HTML:

<div class="custom-cm">
<div class="custom-cm__item" onclick="closeAndFocus()">Text eingeben</div>
<div class="custom-cm__item" onclick="copyText()">Text kopieren</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="helpMenu()">Hilfe</div>
<div id="SavePicLine" class="custom-cm__divider" style="display: none;"></div>
<div id="SavePic" class="custom-cm__item" onclick="downloadPic()" style="display: none;">Bild speichern</div>
<div class="custom-cm__divider"></div>
<div class="custom-cm__item" onclick="window.location.reload()">Aktualisieren</div>
<div class="custom-cm__item" onclick="showContextMenu(false);">Schließen</div>
</div>

CSS:

.custom-cm {
   background-color: #ffffff;
   border: 1px solid #cccccc;
   box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
   padding: 10px 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   display: none;
}

.custom-cm__item {
   cursor: pointer;
   padding: 8px 15px;
}

.custom-cm__item:hover {
   background-color: #f3f3f3;
}  

.custom-cm__divider {
   border-bottom: 1px solid #eeeeee;
   margin: 10px 0;
}

您可以在这里进行测试:https://codepen.io/IBimsEinDomi/pen/PoPEJER

javascript html css
1个回答
0
投票

多数民众赞成在:

function eventShowCM(e){
    e.preventDefault();
    showContextMenu();
    if(e.clientY + cm.offsetHeight < window.innerHeight) {
        cm.style.top = e.clientY + "px";
    }
    else {
        cm.style.top = (window.innerHeight - cm.offsetHeight) + "px";
    }
    if(e.clientX + cm.offsetWidth < window.innerWidth) {
        cm.style.left = e.clientX + "px";
    }
    else {
        cm.style.left = (window.innerWidth - cm.offsetWidth) + "px";
    }
}
window.addEventListener("contextmenu", eventShowCM);
window.addEventListener("click", function(){
    showContextMenu(false);
});
© www.soinside.com 2019 - 2024. All rights reserved.