使用输入复选框的汉堡菜单不起作用

Question

当我点击复选框时，导航栏的位置没有改变。我已经尝试过类似问题的其他解决方案，但没有任何效果。我不明白为什么它不起作用。我必须在导航栏上显示：块吗？。我看了很多教程，但我就是不能在这里实现它。

--index.html--

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
      integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <link rel="stylesheet" href="/css/style.css">
    <title>Presentation Blog Page</title>
  </head>

  <body>
    <div class="sidebar">
      <div class="portfolio-info">
        <div class="image">
          <img src="/img/venu.jpg" alt="">
        </div>
        <div class="name">
          <p>Venu Gopal Reddy</p>
          <p>Programming Enthusiast</p>
        </div>
      </div>
      <div>
        <label for="check">&#9776;</label>
        <input type="checkbox" id="check">
      </div>
      <div class="navbar">
        <div class="nav-items">
          <a href="#home">HOME</a>
          <a href="#blog">BLOG</a>
          <a href="#contact">CONTACT</a>
        </div>
        <div class="social-icons">
          <a href=""><i class="fab fa-github"></i></a>
          <a href=""><i class="fab fa-linkedin"></i></a>
          <a href=""><i class="fab fa-twitter"></i></a>
          <a href=""><i class="fab fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </body>

</html>

--style.css--

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

:root {
  --primary-text-color: #35383b; /*(53,56,59)*/
  --secondary-text-color: #555a5f; /*(85,90,95)*/
  --primary-bg-color: #6f8f8e; /*(111,143,142)*/
  --secondary-bg-color: #96b2b1; /*(150,178,177)*/
}

html,
body {
  font-family: 'Roboto', sans-serif;
  color: var(--primary-text-color);
  background-color: #e2e2e2;
  font-size: 100%;
}

@media(max-width: 768px) {
  .sidebar {
    width: 100%;
    height: 100px;
    background-color: var(--primary-bg-color);
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
  }

  /* Portfolio styling */

  .sidebar .portfolio-info {
    flex-basis: 50%;
    height: 100%;
    display: inherit;
    justify-content: flex-start;
    align-items: center;
  }

  .sidebar .portfolio-info .image {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
  }

  .sidebar .portfolio-info .image img {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
  }

  .sidebar .portfolio-info .name p:first-child {
    font-size: 1.5rem;
  }

  .hamburger label{
    display: block;
    cursor: pointer;
  }

  /* Menu styling */

  .sidebar .navbar {
    position: absolute;
    top: 0;
    right: -1000px;
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    width: 100%;
    height: 300px;
    justify-content: space-evenly;
    align-items: center;
  }

  #check:checked ~ .sidebar .navbar {
    right: 100px;
  }
}

我做错了什么？

Answer 1

您在选择器中犯了一个小错误

 #check:checked ~ .sidebar .navbar

在这里，我已经更正了它，只是对您的 HTML 做了一个小改动。 ~ 与您使用它的方式不同，阅读它 here.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

:root {
  --primary-text-color: #35383b; /*(53,56,59)*/
  --secondary-text-color: #555a5f; /*(85,90,95)*/
  --primary-bg-color: #6f8f8e; /*(111,143,142)*/
  --secondary-bg-color: #96b2b1; /*(150,178,177)*/
}

html,
body {
  font-family: 'Roboto', sans-serif;
  color: var(--primary-text-color);
  background-color: #e2e2e2;
  font-size: 100%;
}

@media(max-width: 768px) {
  .sidebar {
    width: 100%;
    height: 100px;
    background-color: var(--primary-bg-color);
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    text-align: center;
  }

  /* Portfolio styling */

  .sidebar .portfolio-info {
    flex-basis: 50%;
    height: 100%;
    display: inherit;
    justify-content: flex-start;
    align-items: center;
  }

  .sidebar .portfolio-info .image {
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
  }

  .sidebar .portfolio-info .image img {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 50%;
  }

  .sidebar .portfolio-info .name p:first-child {
    font-size: 1.5rem;
  }

  .hamburger label{
    display: block;
    cursor: pointer;
  }

  /* Menu styling */

  .sidebar .navbar {
    position: absolute;
    top: 0;
    right: -1000px;
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    width: 100%;
    height: 300px;
    justify-content: space-evenly;
    align-items: center;
    transition: all 1s;
  }
  #check {display: none;}
  #check:checked + .navbar {
    right: 100px;
  }
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
      integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <link rel="stylesheet" href="/css/style.css">
    <title>Presentation Blog Page</title>
  </head>

  <body>
    <div class="sidebar">
      <div class="portfolio-info">
        <div class="image">
          <img src="/img/venu.jpg" alt="">
        </div>
        <div class="name">
          <p>Venu Gopal Reddy</p>
          <p>Programming Enthusiast</p>
        </div>
      </div>
      
        <label for="check">&#9776;</label>
        <input type="checkbox" id="check">
      
      <div class="navbar">
        <div class="nav-items">
          <a href="#home">HOME</a>
          <a href="#blog">BLOG</a>
          <a href="#contact">CONTACT</a>
        </div>
        <div class="social-icons">
          <a href=""><i class="fab fa-github"></i></a>
          <a href=""><i class="fab fa-linkedin"></i></a>
          <a href=""><i class="fab fa-twitter"></i></a>
          <a href=""><i class="fab fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </body>

</html>

使用输入复选框的汉堡菜单不起作用

hamburger menu using input checkbox is not working

html

css

navbar

hamburger-menu

responsive