时间戳

首页 > 解决方案 > 导航栏链接在图像附近时不会消失

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

问题描述

嗨，所以我正在创建一个导航栏菜单，在将网页大小更改为手机大小后，我得到的是一场灾难。这是缩放 chrome 后的样子…… 在此处输入图像描述

当我单击它时，您的 Hemberger 图标应该会显示徽标下方的导航栏，但它也不起作用。

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

我的代码：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>

样式.css

* {
    margin: 0;
    padding: 0;
}

.red-box {
    border: 100px solid #90241f;
    background-color: #90241f;
    height: 0.20px;
}

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

.navbar  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    text-decoration: none;
    color: white;
    padding: 1rem;
    display: block;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@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;
    }

}

脚本.js

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

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

标签： javascripthtmlcss

解决方案

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

.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-logo类选择器并定义一个更小的宽度。

还有一个小提示，也许您应该为图像使用百分比而不是像素，请参阅：CSS - Percentages or Pixels?

推荐阅读