如何在屏幕右边缘显示下拉菜单或任何 div-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249199932

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何在屏幕右边缘显示下拉菜单或任何 div

发布于2023-03-23 22:18 阅读(1170) 评论(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>