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

【问题标题】：How to display a dropdown menu or any div at right edge of screen如何在屏幕右边缘显示下拉菜单或任何 div
【发布时间】：2020-09-07 11:02:03
【问题描述】：

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

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

我希望我的菜单始终显示在右侧的静态位置（比如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/

【问题讨论】：

标签： html jquery css bootstrap-4

【解决方案1】：

您无需在下拉菜单中的 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>

【讨论】：

【解决方案2】：

修改了您的代码。这就是最终的工作：

$("#cross-menu").css({
    display: "block",
    position: "fixed",
    top: "calc(3.5rem)",
    right: "10px",
    left: 'auto',
    'max-width': "150px",
}).addClass("show");

【讨论】：

【解决方案3】：

试试这个：

$('button').click(function(){
  $('#menu').animate({
    right: 0
  }, 300);
});

$('li').click(function(){
  $('#menu').animate({
    right: -80
  }, 300);
});

*{box-sizing:border-box;}
body{margin:0;}
button{margin:10vh 0 0 49vw;}
#menu{
  position:fixed;
  width: 80px;
  top:10;
  right: -80px;
}
ul{margin:0;padding:0;list-style-type:none;border:1px solid red;}
li{
  padding: 10px 25px;
  border:1px solid green;
}
li:hover{
  cursor: pointer;
  background: #ccc;
}
aside{
margin-top:10vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="menu">
  <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
  </ul>
</div>
<button>Show Menu</button>
<aside>Stick a tags inside the LIs to create a menu</aside>

【讨论】：

【解决方案4】：

我认为这将解决您的问题。首先我不建议下拉菜单有 position: "fixed" 除非有必要，相反你可以使用 position:absolute;

现在查看您的要求，而不是减去左侧宽度，您可以使用 left:auto;右：5%；（无论您需要什么）。这也会适应不同的设备宽度。

您的代码：位置：“固定”，顶部：“计算（3.5rem）”，左：左，

我建议的更改：位置：“绝对”，顶部：“计算（3.5rem）”，左：“自动”，右：“5%”

希望对你有所帮助。

【讨论】：