带有下拉列表的响应式导航栏答案

【问题标题】：Responsive Navbar with drop down list带有下拉列表的响应式导航栏
【发布时间】：2021-04-20 05:14:21
【问题描述】：

当屏幕尺寸对于水平布局来说太小时，我正在尝试创建一个下拉列导航栏布局。

我的 CSS 技能非常初级，即使解决方案不是 flexbox 形式，我也非常高兴。

我想要的一件事是当按下下拉列表按钮时标题背景颜色保持不变，因为它喜欢向下扩展内容/链接。我计划稍后添加 javascript...所有 HTML 和 CSS 都包含在下面。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS main stylesheet -->
    <link rel="stylesheet" href="./CSS/style.css" />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
    <title>Home Page</title>
  </head>
  <body>
    <header>
      <img src="Images/Logo 70px.png" alt="logo" id="logo" />
      <!--Logo-->
      <nav>
        <ul class="nav_links">
          <li><a href="./index.html">Home</a></li>
          <li><a href="./merchandise.html">Merchandise</a></li>
          <li><a href="./about.html">About</a></li>
          <li><a href="./contactUs.html">Contact Us</a></li>
        </ul>
      </nav>
        <button class="dropbtn">
          <i class="fas fa-bars"></i>
        </button>
      </div>
      <a href="basket.php" id="Basket"><i class="fas fa-shopping-cart"></i></a>
    </header>
    <div class="flex-container">
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
      <div class="column">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
          repellat suscipit voluptas, ad rerum corrupti incidunt assumenda,
          fugit amet, recusandae officiis unde similique ullam. Quos magni
          cupiditate omnis dignissimos. Repudiandae architecto alias odio modi
          neque asperiores veritatis dicta ipsum! Enim cupiditate laborum
          voluptatem ipsa incidunt optio nulla facilis natus?
        </p>
      </div>
    </div>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");

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

body {
  background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

header {
  display: flex;
  padding: 10px 0;
  background-color: #ddf2eb;
  overflow: hidden;
  align-items: center;
}

#logo {
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 2%;
}

.nav_links {
  list-style: none;
  margin-left: 3vw;
  white-space: nowrap;
  margin-right: 20px;
}

.nav_links li {
  display: inline-block;
  padding: 0px 2.5vw;
}

header a {
  transition: all 0.3s ease 0;
  font-family: "Montserrat", "sans-serif";
  font-weight: 500;
  font-size: 15px;
  color: #606d5d;
  text-decoration: none;
}

#Basket {
  display: flex;
  margin-left: auto;
  margin-right: 40px;
  font-size: 30px;
}

header a:hover {
  color: honeydew;
}

.flex-container {
  display: flex;
}

.dropbtn {
  display: none;
}

.dropdown-content {
  display: none;
}

@media only screen and (max-width: 600px) {
  header {
    justify-content: space-between;
  }

  #Basket,
  .nav_links {
    display: none;
  }

  .dropbtn {
    font-size: 2rem;
    display: inline-block;
    border: transparent;
    color: rgb(113, 39, 136);
    background-color: transparent;
    margin-right: 2%;
  }

  .dropbtn:hover {
    transform: rotate(90deg);
    color: rgb(240, 204, 252);
    cursor: pointer;
    transition: all 0.3s linear;
  }
}

【问题讨论】：

标签： javascript html css flexbox

【解决方案1】：

您已经完成了很多工作。为了创建下拉菜单，您可以创建一个带有 css position:relative,z-index:5; 链接的框。以及根据您的其他 UI 细节。默认情况下，将显示属性设置为无。并在下拉 btn 中添加切换功能。

【讨论】：