Question

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

我在 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;
  }
}

Answer 1

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

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

1 个答案: