Question

我的下拉菜单在所有浏览器和chrome移动预览中均能正常工作，但在实际的移动设备上却无法正常工作。在iPad上根本无法显示，在手机上也无法显示，您只能在菜单内看到文本的最底端。

我尝试更改z-index。
我还考虑过为菜单设置一个固定的高度，但是最终视您的窗口大小而定看起来不均匀...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        .navbar {
        overflow: hidden;
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    .navbar span {
        display: block;
        text-align: center;
        padding: 1vw 5vw 1vw 0px;
        text-decoration: none;
        font-size: 2.5vw;
    }

    #home {
        float: left;
    }


    .dropup {
        float: right;
        position: relative;
        display: inline-block;
    }

    .dropup-content {
        display: none;
        position: fixed;
        bottom: 3.5vw;
        min-width: 100vw;
        z-index: 1;
    }

    #clickContact {
        background-color: aqua;
    }

    #clickAbout {
        background-color: red;
    }

    .show {
        display: block;
    }
    </style>
</head>

<body>

    <footer>
        <div class="navbar">
          <span id="home">Home</span>

          <div>
            <span class="dropup" onclick="contactFunction()">Contact</span>
                <div class="dropup-content" id="clickContact">
                    <p>some other stuff</p>
              </div>
            </div>
            <div>
            <span class="dropup" onclick="aboutFunction()">About</span>
                <div class="dropup-content" id="clickAbout">
                    <p>Some stuff</p>
              </div>
            </div>
        </div>
    </footer>


    <script>
        function contactFunction() {
            document.getElementById("clickContact").classList.toggle("show");
            document.getElementById("clickAbout").classList.remove("show");
        }

        function aboutFunction() {
            document.getElementById("clickAbout").classList.toggle("show");
            document.getElementById("clickContact").classList.remove("show");
        }

        window.onclick = function(event) {
          if (!event.target.matches('.dropup')) {
            var dropdowns = document.getElementsByClassName("dropup-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
              var openDropdown = dropdowns[i];
              if (openDropdown.classList.contains("show")) {
                openDropdown.classList.remove("show");
              }
            }
          }
        }
    </script>
</body>
</html>

Answer 1

您仅需要在移动设备上增加菜单的字体大小。并且也增加dropup-content的位置。您可以尝试以下CSS：

@media (max-width: 860px) {
.navbar span {
    font-size: 5.5vw;
}
.dropup-content {
    bottom: 9.5vw;
}}

下拉菜单在移动设备上不起作用

1 个答案: