Question

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

感谢您的帮助。

-Lynn

Answer 1

很不清楚你在寻找什么，但我会假设你想要在屏幕上没有足够的位置时修改下拉的位置。你最好的选择是检查你的javascript以查看你的下拉（即它的高度）是否大于窗口的高度。如果不是，请不要担心（假设位置正确）。如果它更大，则为下拉设置一个新位置（假设它处于绝对定位，取决于您想要的高度，它可以像将top属性设置为0一样简单。这应该在每次加载文档时执行

就个人而言，最好完全避免这种情况，永远不会达到下拉，更不用说超越网站的维度。这会对您网站的用户体验产生负面影响。

编辑：根据更多信息，根据我对您的问题的理解，我会做的就是这样。通常情况下，下拉的样式采用绝对定位，但要确切地找出它们的位置，它总是相对到您的主要导航（您的下拉将从中下降）。所以知道这一点，我会在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位置，取决于您希望下拉相对于其父菜单的位置。项目
如果低于主导航，则计算相反。我会告诉你这个，因为一点点玩不会伤害：）

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

我已经给出了代码背后的逻辑，如果您不理解我想要解释的内容，请告诉我。

专利

当页面上没有足够的空间时，如何使下拉菜单上升 - HTML / Javascript

1 个答案: