Question

该网站至少需要1080px全屏浏览器才能访问完整的下拉菜单选项。

在我的分辨率为1366x768的笔记本电脑上，下拉菜单离开屏幕（仅在底部），并且无法访问大多数菜单项。我做了一些样式更改来调整它，但我不认为CSS可以修复它。我也试过一些JS脚本，但它没有帮助。我在JS脚本上的表现不是很好。该网站是在基础框架上构建的（

）

当菜单位于屏幕底部时，有没有办法自动调整下拉菜单，将其向上移动？我正在调查一个解决方案。如果有人之前已经解决了这个问题，我很想知道你是怎么做到的。

我想摆脱这些非常长的下拉菜单，但这不会很快发生。

这是现有行为：

| Menu      |                      
| Menu      |
| Menu      +------------------+
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

这是我在笔记本电脑上寻找的行为 - 当在屏幕的底部时，第二个菜单应自动向上移动以显示所有菜单时间和子菜单项。

| Menu      |
| Menu      |
| Menu      +------------------+
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |                      
| Menu      | Sub Menu         |
| Menu      | Sub Menu         |
| Menu >>   | Sub Menu         |
| Menu      | Sub Menu         |               
+-----------+ Sub Menu         |
            | Sub Menu         |
            | Sub Menu         |
            +------------------+

更新：我遇到的问题是我们使用的工具会自动创建下拉菜单。所以，我无法直接编辑HTML。但是，我可以识别该类并操纵CSS。我确实试图添加我的自定义CSS，但它没有工作，使用没有ID的JS脚本也没有给出好的结果。

以下是HTML代码：

<div class="nav-wrapper">
<ul class="navigation">                                            
 <li class="has-children" >
     <a href="">Top Nav Menu</a>
     <ul class="sub-menu">
         <li class="has-children" >
             <a href="">Dropdown Menu Level 1 </a>
             <ul class="sub-menu"><li data-mc-id="31">
                 <a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                 <li ><a href="">Dropdown Menu Level 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

我们有大约五种不同的下拉菜单，问题在于只有一个长按菜单。我确实考虑过可滚动菜单，但考虑到我们使用的工具，它可能很难实现。

谢谢！

Answer 1

Google搜索 javascript智能下拉菜单或 javascript下拉菜单调整为屏幕高度会产生很多结果。

我喜欢this one，它是Vanilla Js并表现得很快，但它只能做两个级别。

This one可以做更多级别，但它需要jQuery。

尽管如此，我还是希望你能够远离这些非常长的下拉菜单＃34;而是使用Mega Menus。

下拉菜单会在屏幕底部切断

1 个答案: