我正在尝试创建这个汉堡菜单下拉菜单，但我不确定如何将其连接到应该使 dorpdown 发生的复选框

问题描述 投票：0回答：1

我尝试使用 

#active:checked ~.dropdown
将按下时出现和消失的下拉操作连接到菜单/关闭图标复选框，但它似乎不起作用。你认为只用 html css 实现这个可行吗？或者我必须使用 Java 脚本来实现结果。大约一个月的时间里，我一直在练习 css 和 html，看看没有它们我能走多远，你认为我是时候开始 javascript 了吗？

* {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

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

body {
    height: 100vh;
}

:root {
    --signbutton: #4C5FD5;
    --searchbackground: #dadbf1;
    --navfooter: #000000;
    --background: #fff;
}

nav {
    display: flex;
    background: #000000;
    color: var(--background);
    height: 10vh;
    align-items: center;
}

nav .title {
    display: flex;
    margin-right: auto;
    align-items: center;
}

nav .buttons {
    display: flex;
    align-items: center;
    height: 10px;
}

.title h1 {
    font-size: 28px;
}

.divider {
    width: 2px;
    height: 30px;
    background-color: #fff;
    margin: 7px ;
}

.responsivebtn {
    position: relative;
}

.close, .menu {
    cursor: pointer;
    right: 100px;
    position: absolute;
    display: none;
}

.menu-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.close, .menu {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

#active:not(:checked) ~ .menu-icon .menu {
    display: block;
}

#active:checked ~ .menu-icon .close {
    display: block;
}

#active {
    display: none;
}

.dropdown {
    background-color: #1f1e1e;
    color: #fff;
    width: 100%;
    height: 24%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.margin {
    margin-top: 8px;
    width: 50%;
    height: 2px;
    background-color: #dadbf1;
}

.dropdown p {
    margin-top: 5px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="Abstract.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
  </head>
  <body>
      <nav>
          <div class="title">
              <img src="icons8-logo-50.png" alt="Logo">
              <h1>Abstract</h1>
              <div class="divider"></div>
              <span>Help Center</span>
          </div>
          <div class="buttons">
              <div class="responsivebtn">
                  <input type="checkbox" id="active">
                  <label for="active" class="menu-icon">
                      <div class="close">
                          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>
                      </div>
                      <div class="menu">
                          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>
                      </div>
                  </label>
              </div>
              <div class="btn">
                  <input type="button" value="Submit a request">
                  <input type="button" value="Sign in">
              </div>
          </div>
      </nav>
      <div class="dropdown">
          <p>Submit request</p>
          <div class="margin"></div>
          <p>Sign in</p>
      </div>
  </body>
</html>

html css interactive
1个回答
0
投票

~
之后将选择兄弟姐妹。

使用

nav:has(#active:checked) ~ .dropdown {
  height: 24%;
}


* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
}

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

body {
  height: 100vh;
}

:root {
  --signbutton: #4c5fd5;
  --searchbackground: #dadbf1;
  --navfooter: #000000;
  --background: #fff;
}

nav {
  display: flex;
  background: #000000;
  color: var(--background);
  height: 10vh;
  align-items: center;
}

nav .title {
  display: flex;
  margin-right: auto;
  align-items: center;
}

nav .buttons {
  display: flex;
  align-items: center;
  height: 10px;
}

.title h1 {
  font-size: 28px;
}

.divider {
  width: 2px;
  height: 30px;
  background-color: #fff;
  margin: 7px;
}

.responsivebtn {
  position: relative;
}

.close,
.menu {
  cursor: pointer;
  right: 100px;
  position: absolute;
  display: none;
}

.menu-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.close,
.menu {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

#active:not(:checked)~.menu-icon .menu {
  display: block;
}

#active:checked~.menu-icon .close {
  display: block;
}

#active {
  display: none;
}

nav:has(#active:checked)~.dropdown {
  height: 24%;
}

.dropdown {
  background-color: #1f1e1e;
  color: #fff;
  width: 100%;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.margin {
  margin-top: 8px;
  width: 50%;
  height: 2px;
  background-color: #dadbf1;
}

.dropdown p {
  margin-top: 5px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<nav>
  <div class="title">
    <img src="icons8-logo-50.png" alt="Logo">
    <h1>Abstract</h1>
    <div class="divider"></div>
    <span>Help Center</span>
  </div>
  <div class="buttons">
    <div class="responsivebtn">
      <input type="checkbox" id="active">
      <label for="active" class="menu-icon">
                    <div class="close">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
                            <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
                        </svg>
                    </div>
                    <div class="menu">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
                            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" />
                        </svg>
                    </div>
                </label>
    </div>
    <div class="btn">
      <input type="button" value="Submit a request">
      <input type="button" value="Sign in">
    </div>
  </div>
</nav>
<div class="dropdown">
  <p>Submit request</p>
  <div class="margin"></div>
  <p>Sign in</p>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.