如何让下拉菜单在页面空间不足的情况下上升- HTML/Javascript

How to Make a Dropdown Menu go up When There Isn't Enough Room on the Page - HTML/Javascript

本文关键字：情况下 Javascript HTML 下拉菜单 空间      更新时间：2023-09-26

我正在寻找一种方法，使我的下拉菜单上升时，没有足够的空间在页面上看到它完全。我只使用HTML, Javascript, CSS和JQuery。

谢谢你的帮助。

林恩

非常不清楚您在寻找什么，但我将假设您希望在屏幕上没有足够的位置时修改下拉列表的位置。你最好的选择是在你的javascript中检查一下你的下拉列表(例如:它的高度比窗户的高度大。如果不是，不要担心(假设位置是正确的)。如果它更大，则为下拉设置一个新位置(假设它是绝对位置，取决于您想要的高度，可以像将top属性设置为0一样简单)。这应该在每次加载文档时执行。

个人最好完全避免这种情况，一个下拉绝对不能达到，更不要说超过网站的尺寸。它会对你网站的用户体验产生负面影响。

EDIT:基于更多的信息，这是我会根据我对你的问题的理解做的。通常下拉菜单的样式都是绝对定位的，但是为了找到它们的确切位置，它总是相对你的主导航(你的下拉菜单将从哪里下拉)。所以知道这一点，我将模仿这个逻辑在jquery/js脚本。下面是高级逻辑:

$(<your main navigation's section>).hover(function(){
//logic for hover in
    <show drop down (opacity:1 or display:block)>
    if(menu position is greater or equal to 50% of screen){ //this means that menu is located in bottom of screen
    <display drop down below navigation>
    }else{ //menu position is less than 50$ of screen (menu is located in top half of screen
    <display drop down above navigation>
    }
}, function(){
//logic for hover out
});

显示下拉列表的逻辑无非是一个简单的jquery调用来显示下拉列表容器(通过重新定义容器样式的不透明度或显示参数)。要知道在哪里放置下拉菜单，逻辑如下:

  • 如果高于你的主要导航，得到你的主要导航的y位置，并减去你的下拉的高度(检索所有这些值与jquery/js)。在你的下拉菜单和你的主导航之间给出或取一个偏移量，你有下拉菜单的绝对y轴位置。绝对x位置将相对于用户在主导航中悬停的按钮的x位置，根据您希望下拉菜单相对于其父菜单项的定位方式进行偏移。
  • 如果低于你的主导航，计算是相反的。我把这个给你，因为稍微玩一下不会有伤害:)

当我之前提到，即使下拉菜单的位置是绝对的，但实际上测量值是相对于主导航的，这对你来说尤其如此，因为你的主导航和下拉菜单的位置都是动态的，这意味着静态位置在这种情况下不起作用。

我已经给了你代码背后的逻辑，如果你不明白我想解释的，请告诉我。

帕特

相关文章：