如何在屏幕右边缘显示下拉菜单或任何 div
发布于2023-03-23 22:18 阅读(1291) 评论(0) 点赞(5) 收藏(4)
我正在尝试显示一个菜单，该菜单将从屏幕的右边缘显示。
我已经有一个脚本可以在用户点击的位置显示菜单。对于这个菜单，我从用户点击的坐标中减去一些像素。但这对我来说不太好，原因有二：
- 我希望我的菜单始终显示在右侧的静态位置（例如
10px） - 我不想在必须找到屏幕右边缘并减去菜单宽度的地方编写代码，因为它不会独立于设备。
我试过了right: 10;，但这奇怪地似乎没有用。有任何想法吗 ？
$('#cross').on('click', function (e) {
// co-ordinates to display the menu
var top = e.pageY
var left = e.pageX;
left = left - 150;
// Display the menu
$("#cross-menu").css({
display: "block",
position: "fixed",
top: "calc(3.5rem)",
left: left
}).addClass("show");
return false;
});
代码： https: //jsfiddle.net/7ysp46xv/8/
解决方案
您不需要在下拉菜单中的 jQuery 中设置大量 CSS - Bootstrap 类已经设置了其中的大部分以按照您想要的方式工作。
Bootstrap 有一个类show，您已经将其添加到 jQuery 的菜单中。您只需要对其进行一些小的更改 - 您可以将这些添加到自定义类中：
#cross-menu.show {
right: 10px;
left: auto; /* remove the left position so it won't use the full screen*/
top: auto; /* remove the position 100% */
}
然后你需要在 jQuery 中做的就是应用这个show类：
$('#cross').on('click', function (e) {
$("#cross-menu").addClass("show");
});
工作示例：
$('#cross').on('click', function (e) {
$("#cross-menu").addClass("show");
});.hamburger {
height: 80%;
width: 2rem;
border: 1px solid white;
padding: 0px 5px;
border-radius: 5px;
}
.hamburger div {
margin: 0.4rem 0px;
border: 1px solid white;
background-color: white;
border-radius: 5px;
}
.link-simple {
cursor: pointer;
}
#cross {
cursor: pointer;
}
#cross-menu {
background-color: gray;
color: white;
}
#cross-menu.show {
top:auto;
right:10px;
left:auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"><html>
<body>
<nav class="navbar navbar-dark bg-dark justify-content-center text-light" style="height: 3.5rem;">
<!-- Hamburger Menu-->
<div class="col-2 col-sm-4 align-content-start">
<div class="hamburger link-simple">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Topic Name -->
<div class="col-9 col-sm-4 text-center">
<span class="navbar-brand mb-0 h1">Heading</span>
</div>
<!-- User Info / Menu -->
<div class="col-1 col-sm-4 text-right align-content-end" id="cross">
X
</div>
</nav>
<div class="dropdown-menu dropdown-menu-sm" id="cross-menu">
<a class="dropdown-item pl-3"><i class="fa fa-gear mr-4"></i>Settings</a>
<a class="dropdown-item pl-3"><i class="fa fa-sign-out mr-4"></i>Logout</a>
</div>
</body>
</html>所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/513387/ae4124941943a11ecff5/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力