时间戳

首页 > 解决方案 > 导航栏在手机视图中没有响应

javascript - 导航栏在手机视图中没有响应

问题描述

我是网页设计和开发的初学者，我正在尝试让导航栏在手机和平​​板电脑上查看时更具响应性，但由于某种原因，它在手机上看起来确实有问题，我使用了元标记，以便浏览器正确地呈现它，但它没有，它出现了所有错误，如下图所示：

单击链接查看图片->如您所见，它出现了一半 我已经启用了溢出-x：隐藏，但有些人仍然能够向右浏览并看到不应该的导航栏除非单击可见，否则我不明白为什么会这样。

点击链接查看图片 ->这是加载时的样子。

我还尝试将屏幕分辨率设置如下：

`@media screen and (max-width:1024px){
    .nav-links
{
        width:48%;
    }

}


@media screen and (max-width:768px)`

这也在我的 firebase 服务器上运行，可通过此链接查看：https ://test-response-5f60c.web.app/PAGES/quotes.html

对于任何代码不一致和错误，我深表歉意，请帮助我，我不明白我在 CSS 中做错了什么。这是我遵循的教程：单击链接->教程

以下是我的代码：

function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");

    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");

        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });

}

navSlide();
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

body{
    margin: 0;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #000000;
    color: #f9f9f9;
    font-family: 'Open Sans', sans-serif;
    font-size: large;
}

.logo{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 20px;
}

.nav-links {
    list-style-type: none;
    padding: 1.2%;
    margin:0;
    overflow: hidden;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-links li a {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 26px 26px;
    text-decoration: none;
    transition: 0.3s;
}


li a:hover {
    background-color: #3498DB ;

}

.burger{

    display: none;
    cursor: pointer;
}

.burger div{
    width: 25px;
    height: 4px;
    background-color: #f9f9f9;
    margin: 5px;


}

.head {
    font-family: sans-serif;
    font-weight: bold;
    margin: auto;
    width: 60%;
    border: 3px solid #3498DB ;
    padding: 40px;
    text-align: center;
    opacity: 5.9;
    animation-duration: 3s;
    animation-name: fadein;

}


@media screen and (max-width:1024px){
    .nav-links{
        width:48%;
    }
}


@media screen and (max-width:768px){

    body {
        overflow-x: hidden !important;

    }


    .nav-links{
        position: absolute;
        right: 0;
        height: 92vh;
        top: 8vh;
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items:center;
        width: 50%;
        transform: translate(100%);
        transition: transform 0.5s ease-in;

    }

    .nav-links li{
        opacity: 0;
    }

    .burger{
        display: block;
    }

    .nav-active {
        transform: translate(0%);
    }
}


@keyframes navLinkFade {
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}


#googleForm {
    margin-left: 20px;
    text-align: center;
    margin-top: 20px;
}
<!doctype html>
<html>
<head>
    <style>
        body {
            background-image: url('../IMG/land2.jpg');
            height: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto ;
        }
    </style>
    <title> Quotes </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../CSS/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>

<body>

    <nav>

        <div class="logo">
            <h4> Edge Concreting and Landscaping </h4>
        </div>

        <ul class="nav-links">
            <li><a href="../index.html">Home</a></li>
            <li><a href="quotes.html">Quotes</a></li>
            <li><a href="contact.html">Contact</a></li>

        </ul>

        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>

    </nav>





<div id="googleForm">
    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd5uy_5vc6ozsY1kcGRliC8hYH9w_WqEU1acN0tJQ6rrqEJmg/viewform?embedded=true" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…&lt;/iframe>
</div>
    <script src="../JS/app.js"></script>
</body>


</html>

标签： javascripthtmlcsswebresponsive-design

解决方案

将您的媒体查询设置为较低max width和绝对位置。

例如。

@media (max-width: 768px){.logo h4 {position: absolute; 
right: 50px;}}

这应该使您能够选择您的徽标并针对移动设备进行调整。

@media (max-width: 768px){.nav-links{position: absolute; 
right: 50px;}}

应该使您能够选择和调整您的下拉菜单。您可以在同一媒体查询中更改或替换right或left或top或bottom或。width

尝试减小nav-links.

推荐阅读