Question

现在我只使用HTML + CSS制作标题导航栏。（没有Javascript）

参阅此视频 - ＆gt; https://www.youtube.com/watch?v=xMTs8tAapnQ，

在9:46，他使用复选框制作hambuger菜单，使用js。

当我关注他的视频时，它无法正常工作。

[index.html的]

<html>
<head>
<title>Apple</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style2.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <div class="menu-mobile">
            <a href="#"><i class="fab fa-apple"></i></a>
            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle">
        </div>
        <div class="menu-pc">
            <a href="#"><i class="fab fa-apple"></i></a>
            <a href="#">Mac</a>
            <a href="#">iPad</a>
            <a href="#">iPhone</a>
            <a href="#">Watch</a>
            <a href="#">Music</a>
            <a href="#">Support</a>
            <a href="#"><i class="fas fa-search"></i></a>
            <a href="#" class="nav-cart"><i class="fas fa-shopping-cart"></i></a>
        </div>
    </nav>
    <article class="first">
        <p>FIRST ARTICLE</p>
    </article>
    <article class="first">
        <p>SECOND ARTICLE</p>
    </article>
        <article class="first">
        <p>THIRD ARTICLE</p>
    </article>
    <footer>
        Copyright@
    </footer>
</body>
</html>

[style.css文件]

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

.menu-mobile {
    justify-content: center;
    align-items: center;
    background-color: #2d2d2d;
    height: 45;
    display: none;
}

.menu-mobile a {
    display: flex;
    flex: 9;
    justify-content: center;
    align-items: center;
    font-size: 20;
}

.menu-pc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #2d2d2d;
    height: 45;
}

a {
    color: white;
    text-decoration: none;
    font-weight: 100;
}

.menu-pc a:hover {
    color: #999797;
}

label {
    color: white;
    margin-right: 10px;
    font-size: 20px;
    display: none;
}

#toggle {
    display: none;
}

label:hover {
    color: #999797;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    label {
        display: block;
    }
    .menu-mobile {
        display: flex;
    }
    .menu-pc {
        display: none;
    }
    #toggle:checked + .menu-pc {
        display: block;
    }
}

根据他的视频，当我点击汉堡包时，会出现menu-pc（显示：阻止）

但它没有发生任何事情。

我该如何解决这个问题？

感谢。

Answer 1

将复选框放在div menu-pc之前，它现在包含在div中，因此它阻止+运算符找到下一个元素menu-pc。您可以将标签留在原位。

Answer 2

这应该有效，你需要.menu-pc

旁边的复选框

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}

.menu-mobile {
    justify-content: center;
    align-items: center;
    background-color: #2d2d2d;
    height: 45;
    display: none;
}

.menu-mobile a {
    display: flex;
    flex: 9;
    justify-content: center;
    align-items: center;
    font-size: 20;
}

.menu-pc {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #2d2d2d;
    height: 45;
}

a {
    color: white;
    text-decoration: none;
    font-weight: 100;
}

.menu-pc a:hover {
    color: #999797;
}

label {
    color: white;
    margin-right: 10px;
    font-size: 20px;
    display: none;
}

#toggle {
    display: none;
}

label:hover {
    color: #999797;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    label {
        display: block;
    }
    .menu-mobile {
        display: flex;
    }
    .menu-pc {
        display: none;
    }
    #toggle:checked + .menu-pc {
        display: block;
    }
}

<html>
<head>
<title>Apple</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style2.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <nav>
        <div class="menu-mobile">
            <a href="#"><i class="fab fa-apple"></i></a>
            <label for="toggle">&#9776;</label>
            
        </div>
        <input type="checkbox" id="toggle">
        <div class="menu-pc">
            <a href="#"><i class="fab fa-apple"></i></a>
            <a href="#">Mac</a>
            <a href="#">iPad</a>
            <a href="#">iPhone</a>
            <a href="#">Watch</a>
            <a href="#">Music</a>
            <a href="#">Support</a>
            <a href="#"><i class="fas fa-search"></i></a>
            <a href="#" class="nav-cart"><i class="fas fa-shopping-cart"></i></a>
        </div>
    </nav>
    <article class="first">
        <p>FIRST ARTICLE</p>
    </article>
    <article class="first">
        <p>SECOND ARTICLE</p>
    </article>
        <article class="first">
        <p>THIRD ARTICLE</p>
    </article>
    <footer>
        Copyright@
    </footer>
</body>
</html>

带复选框的Navbar汉堡菜单不起作用

2 个答案: