时间戳

首页 > 解决方案 > 如何在屏幕右边缘显示下拉菜单或任何 div

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

问题描述

我正在尝试显示要从屏幕右边缘显示的菜单。

我已经有一个脚本可以在用户点击的位置显示菜单。对于这个菜单，我从用户点击的坐标中减去了一些像素。但这对我来说并不好，原因有两个：

我试过了，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/

标签： htmljquerycssbootstrap-4

解决方案

您不需要在下拉菜单上的 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>

推荐阅读