如何使我的导航栏在移动版网站上不可见？答案

【问题标题】：How to make my navigation-bar invisible on mobile version of web site?如何使我的导航栏在移动版网站上不可见？
【发布时间】：2022-10-01 02:24:22
【问题描述】：

我正在制作一个网站，但我遇到了问题。我的导航栏在关闭时显示在网站的移动版本上，这不应该发生。我试图在网上找到解决方案，但我找不到任何东西。如果您知道解决方案，请帮助我。如果有人想提供帮助，这是代码。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset=\"UTF-8\">
    <meta name=\"description\" content=\"\">
    <meta name=\"keywords\" content=\"\">
    <meta name=\"author\" content=\"\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Exemple</title>
    <link rel=\"stylesheet\" href=\"style.css\">
</head>
<body>
    <header> 
        <nav>
        <ul class=\"nav-links\">
            <li><a href=\"\">Home</a></li>
            <li><a href=\"\">News</a></li>
            <li><a href=\"\">About Us</a></li>
            <li><a href=\"\">Contact us</a></li>
        </ul>
        <div class=\"kocka\">
            <div class=\"linija1\"></div>
            <div class=\"linija2\"></div>
            <div class=\"linija3\"></div>
        </div>
    </nav>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>
</html>
<script rel=\"stylesheet\" src=\"index.js\"></script>
</html>

CSS：

*{
    margin: 0;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(48, 47, 47, 0.816);
    color: rgb(255, 255, 255);
    min-height: 8vh;
}

.nav-links{
    display: flex;
    justify-content: space-around;
    width: 60%;
}

.nav-links a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight:bold;
    font-size: large;
}

.nav-links li{
    list-style: none;
}
.kocka{
    display: none;
    cursor: pointer;
}

.kocka div{
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.2s ease;
}

@media screen and (max-width: 768px){
    body {
        overflow-x: hidden;
    }
    .nav-links{
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: rgba(48, 47, 47, 0.816);
        color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;

    }
    .nav-links li{
        opacity: 1;
    }
    .kocka{
        display: block;
    }
}

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

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

.toggle .linija1{
    transform:rotate(-45deg) translate(-5px , 6px); 
} 
.toggle .linija2{
    opacity: 0;
} 
.toggle .linija3{
    transform:rotate(45deg) translate(-5px , -6px);
}

JavaScript：

const navSlide = () => {
    const kocka = document.querySelector(\'.kocka\');
    const nav = document.querySelector(\'.nav-links\');
    const navlinks = document.querySelectorAll(\'.nav-links li\');

    kocka.addEventListener(\'click\', () => {
        nav.classList.toggle(\'nav-active\');
        navlinks.forEach((link , index)=>{
            if(link.style.animation){
                link.style.animation = \'none\'
            }else{ 
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7+1.5}s`;   
            }
        });
        kocka.classList.toggle(\'toggle\');
    });
    
}

navSlide();

标签： javascript html css web frontend

【解决方案1】：

您可以使用Media Queries 根据屏幕大小更改您的css：

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(48, 47, 47, 0.816);
    color: rgb(255, 255, 255);
    min-height: 8vh;
}

@media screen and (max-width: 480px) {
   nav {
     display:none;
   }
}

这将使您的导航在小于 480 像素宽的屏幕中不可见。

【讨论】：

您好 João Pedro，您的回复对我很有用。我还有一个问题要问。我需要为普通手机屏幕设置多宽？
我认为 480px 很好，因为它将获得大多数设备。您可以转到 Chrome，按 F12 并单击带有平板电脑图标的手机（如果找不到，只需按 Ctrl+Shift+M），它将更改为移动模式，您可以从设备列表中进行选择， iPhone 12 的宽度为 390 像素，Galaxy S22 的宽度为 412 像素，您可以查看要保持此布局的尺寸