时间戳

首页 > 解决方案 > 导航栏在右侧显示一个空白区域

javascript - 导航栏在右侧显示一个空白区域

问题描述

https://codepen.io/Cplay/pen/WNGYezE 一个正在尝试编码的新手。当我在移动模式下访问页面时，右侧会出现空白区域，但是当我单击导航栏的切换菜单时，它就会消失。有人可以帮我解决这个问题吗？我使用了 3 种语言，html css 和 javascript。并且已经尝试使用overflow-x:hidden;。但我不知道在哪里放置这段代码。

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}
/* navigation bar */

nav {
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    width: 30%;
    display: flex;
    justify-content: space-around;
    text-decoration: none;
}
.nav-links li {
    list-style: none;
}
.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 35px;
}
.burger {
    display: none;
}
.burger div {
    width: 30px;
    height: 3px;
    background-color: black;
    margin: 5px;
    transition: all 0.3s ease;
}
@media screen and (max-width:1336px) {
    .nav-links {
        display: flex;
        width: 50%;
        justify-content: space-around;
        text-decoration: none;
    }
}
@media screen and (max-width:1100px) {
    .logo {
        width: 10%;
    }
}
@media screen and (max-width:1100px) {
    .body {
        overflow: hidden;
    }
    .body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 205vh;
        top: 8vh;
        background-color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        cursor: pointer;
    }
}
.nav-active {
    transform: translateX(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);
}
p {
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 300%;
}

<nav>
        <ul class="nav-links">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Get the game</a>
            </li>
        </ul><img class="logo" src="logo.png" width="10%">
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

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

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

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

    });

}

navSlide();

标签： javascripthtmlcssuinavigationbarresponsive

解决方案

你的代码的每一件事都很好。只需更改 .nav-links 中的一些属性。将以下 .nav 链接复制并替换到您的代码中。你的空白将消失。固定位置和 right:0 将使其停留在右侧。还要制作 top:0 而不是 22vh。

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

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

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

    });

}

navSlide();
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f4f4f4;
}
/* navigation bar */

nav {
    background: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    width: 30%;
    display: flex;
    justify-content: space-around;
    text-decoration: none;
}
.nav-links li {
    list-style: none;
}
.nav-links a {
    color: black;
    text-decoration: none;
    font-size: 35px;
}
.burger {
    display: none;
}
.burger div {
    width: 30px;
    height: 3px;
    background-color: black;
    margin: 5px;
    transition: all 0.3s ease;
}
@media screen and (max-width:1336px) {
    .nav-links {
        display: flex;
        width: 50%;
        justify-content: space-around;
        text-decoration: none;
    }
}
@media screen and (max-width:1100px) {
    .logo {
        width: 10%;
    }
}
@media screen and (max-width:1100px) {
    .body {
        overflow: hidden;
    }
    .body {
        overflow-x: hidden;
    }
    .nav-links {
        position: fixed;
    right: 0;
    height: 100vh;
    top: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    }
    .nav-links li {
        opacity: 0;
    }
    .burger {
        display: block;
        cursor: pointer;
    }
}
.nav-active {
    transform: translateX(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);
}
p {
    font-size: 100%;
    font-family: 'Montserrat', sans-serif;
}
h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 300%;
}
<nav>
        <ul class="nav-links">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Get the game</a>
            </li>
        </ul><img class="logo" src="logo.png" width="10%">
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </nav>

@media screen and (max-width:1100px) {
.nav-links {
    position: fixed;
    right: 0;
    height: 100vh;
    top: 0;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
}

}

推荐阅读