Javascript 导航栏链接在图像附近时不会消失_Javascript_Html_Css

Javascript 导航栏链接在图像附近时不会消失

javascript html css

Javascript 导航栏链接在图像附近时不会消失,javascript,html,css,Javascript,Html,Css,大家好，我正在创建一个导航栏菜单，在将网页大小更改为手机大小后，我得到的是一个灾难。这是它的外观后，鳞片铬… 此外，亨伯格图标应该显示我的导航栏下方的标志，当我点击它，但它不工作太多我发誓我找不到任何问题来解决，所以我发布了这个问题我的代码：index.html <!DOCTYPE html> <html> <head> <title>Lagash Scientific Publishing</title> &

大家好，我正在创建一个导航栏菜单，在将网页大小更改为手机大小后，我得到的是一个灾难。这是它的外观后，鳞片铬…

此外，亨伯格图标应该显示我的导航栏下方的标志，当我点击它，但它不工作太多

我发誓我找不到任何问题来解决，所以我发布了这个问题

我的代码：index.html

<!DOCTYPE html>
<html>

<head>
    <title>Lagash Scientific Publishing</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="menu">
        <div class="red-box">

            <nav class="navbar">

                <!-- logo -->
                <div>
                    <img src="img/logo-Lagash-2.jpg" alt="" class="lagash-logo">
                </div>
                <a href="#" class="toggle-button">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </a>

                <div class="navbar-links">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home</a></li>
                    </ul>
                </div>

            </nav>
        </div>





    </div>


</body>

</html>

script.js

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
})

这是因为您的徽标具有固定宽度，请参见：

.lagash-logo {
    width: 126px;
    position: absolute;
    bottom: 1px;
    top: 14px;
    left: 114px;
    right: 1px;
}

这当然没什么问题，但您必须在代码底部定义的媒体查询中缩小它，请参见：

@media (max-width: 600px) {
    .toggle-button {
        display: flex;
    }

    .navbar-links {
       display: none; 
       width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }


    .navbar-links {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }

}

在这里，您需要放置

.lagash徽标

类选择器，并定义一个较小的宽度

还有一个小提示，也许你应该在图像中使用百分比而不是像素，请参阅：

好的，谢谢你的图像我解决了第一个问题，但是当我单击汉堡图标时，其他问题呢？菜单链接没有显示请检查代码，如果可以的话，谢谢

@media (max-width: 600px) {
    .toggle-button {
        display: flex;
    }

    .navbar-links {
       display: none; 
       width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }


    .navbar-links {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }

}