主页 / 问题 / 1558567
Accepted
Aноним
Asked:2023-12-23 12:18:25 +0000 UTC2023-12-23 12:18:25 +0000 UTC

请帮我弄清楚如何制作汉堡菜单

  • 772

我无法制作自适应移动菜单。问题是，在导航中，中心有一个徽标，我需要将其与导航文本分开。
这样标志就保留在中间，文字就在汉堡菜单中。

/* Container */

.container {
  max-width: 1150px;
  margin: 0 auto;
  width: 100%;
  padding: 0 15px;
}


/* Header */

.header {
  background-color: #F6F2EE;
  width: 100%;
}

.header__burger-btn {}


/* Navigation */

.menu {
  padding-top: 33px;
  padding-bottom: 168px;
  position: relative;
}

.menu__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu__list-link {
  color: #000;
}

.search {
  background-color: #c8c5c5;
  border: none;
  outline: none;
  padding: 5px;
}

.search-form.active {
  display: flex;
  align-items: center;
}

.search-form {
  display: none;
  background-color: #fff;
  border-radius: 10%;
  padding: 10px;
  border: none;
  gap: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

@media (max-width: 992px) {
  .menu {
    position: absolute;
    top: 0;
    right: 0;
  }
  .menu__list {
    display: block;
  }
}
<header class="header">
  <div class="container">
    <button class="header__burger-btn">
      <span class="burger__span"></span>
      <span class="burger__span"></span>
      <span class="burger__span"></span>
    </button>
    <nav class="menu">
      <ul class="menu__list">
        <li class="menu__list-item">
          <a class="menu__list-link" href="">Home</a>
        </li>

        <li class="menu__list-item">
          <a class="menu__list-link" href=""> About </a>
        </li>

        <li class="menu__list-item">
          <a class="menu__list-link" href=""> Manu</a>
        </li>

        <li class="menu__list-item">
          <a class="menu__list-link" href="">Reservation</a>
        </li>



        <img class="logo" src="image/logo.png" alt="Картинка">


        <li class="menu__list-item">
          <a class="menu__list-link" href="">Pages</a>
        </li>

        <li class="menu__list-item">
          <a class="menu__list-link" href="">Shop</a>
        </li>

        <li class="menu__list-item">
          <a class="menu__list-link" href=""> Contact</a>
        </li>


        <li class="">
          <img src="image/search.png" alt="search" id="search-btn">
        </li>


        <form action="" class="search-form">
          <input class="search" type="search" name="" placeholder="Search..." id="search-box">
          <label for="search-box"><img class="search-img" src="image/search.png" alt="search"></label>
        </form>

      </ul>
    </nav>
  </div>
</header>

javascript

1 个回答

  1. Best Answer

    如果我正确理解你的职权范围，这就是结果

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Главная</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-lg">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Переключатель навигации">
      <span class="navbar-toggler-icon"></span>
    </button>
        <a class="navbar-brand mx-auto d-lg-none" href="#">
          <img src="https://freesvg.org/storage/img/thumb/1667812423coffee-shop-logo-concept.png" alt="logo" width="50" height="50">
        </a>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav mx-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Manu</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Reservation</a>
            </li>
            <a class="navbar-brand d-none d-lg-block">
              <img src="https://freesvg.org/storage/img/thumb/1667812423coffee-shop-logo-concept.png" alt="logo" width="50" height="50">
            </a>
            <li class="nav-item">
              <a class="nav-link" href="#">Pages</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Shop</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" aria-label="Поиск">
            <button class="btn btn-outline-success" type="submit">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
        </button>
          </form>
        </div>
      </div>
    </nav>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

    Bootstrap 来帮助我们

    • 1

相关问题