Выпадающее меню не работает на мобильных устройствах - PullRequest
Новая
       25

Выпадающее меню не работает на мобильных устройствах

0 голосов
/ 17 октября 2019

Мое раскрывающееся (вверх) меню прекрасно работает во всех браузерах и в браузере Chrome Mobile, но на реальном мобильном устройстве оно не работает. На ipad он вообще не отображается, а на телефоне вы можете просто увидеть самую нижнюю часть текста внутри меню.

Я пытался изменить z-index.
Iтакже рассматривал возможность установки фиксированной высоты для меню, но затем оно выглядит неравномерным в зависимости от размера вашего окна ... 

<!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>

1 Ответ

0 голосов
/ 17 октября 2019

Вам потребуется увеличить размер шрифта меню только на мобильном телефоне. А также увеличить позицию на dropup-content. Вы можете попробовать этот CSS: 

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