Блог

Главная - Вопросы по программированию - Как создать рабочее навигационное меню, которое будет переходить сверху при нажатии на меню гамбургера?

Как создать рабочее навигационное меню, которое будет переходить сверху при нажатии на меню гамбургера?

#html #css

Вопрос:

Я пытался разработать меню гамбургеров, которое позволяло бы пользователям нажимать на него при использовании телефонов и планшетов, но переключаться на полную навигационную панель на рабочем столе. У меня есть рабочая навигационная панель для рабочего стола, но я не смог сделать ее для телефонов/планшетов. Я поставил флажок, чтобы попытаться его реализовать. Но когда флажок(меню ветчины) нажат, он ничего не делает. Кроме того, пробовал с отрицательными значениями. Если кто-нибудь может мне помочь, я был бы вам очень признателен.

Вот мой код:

     @import url("https://fonts.googleapis.com/css2?family=Montserratamp;display=swap");
    html,
    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      font-family: "Montserrat", sans-serif;
    }
    a {
      text-decoration: none;
      color: aliceblue;
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 8%;
      background-color: #2f2e41;
      top: 0;
      color: aliceblue;
      width: auto;
      .nav-links,
      li {
        list-style: none;
        display: inline-block;
        padding: 0 10px;
      }
      .nav-links li a {
        transition: all 0.3s ease 0s;
      }
      .nav-links li a:hover {
        color: #6e00ff;
      }
    }
    input[type="checkbox"] {
      display: none;
    }
    header .navMode .menu {
      display: none;
    }
    @media (max-width: 420px) {
      header nav .nav-links {
        background: #2f2e41;
        position: absolute;
        top: 10%;
        height: 30vh;
        width: 100%;
        right: 0%;
        display: flex;
        flex-direction: column;
        text-align: center;
        transition: all 0.3s ease;
        li {
          margin-top: 5px;
          padding: 10px 0;
          a:hover {
            color: #6e00ff;
            background: none;
          }
        }
      }
      header .navMode .menu{
        display: block;
      }
      #click:checked ~ .menuBar i:before {
        content: "f00d";
      }
      #click:checked ~ .menuBar .nav-links {
        top: 0%;
      }
      header nav i {
        font-size: 20px;
      }
    } 
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>
<body>
    <header>
      <a href="#" class="logo">
        <p>Name</p>
      </a>
      <nav class="navMode">
        <div class="menu">
          <input type="checkbox" id="click">
          <label for="click" class="menuBar">
            <i class="fas fa-bars"></i>
          </label>
        </div>
        <ul class="nav-links">
          <li> <a class="navBar-links" href="#">Lorem
            </a></li>
          <li> <a class="navBar-links" href="#">Lorem
            </a></li>
          <li> <a class="navBar-links" href="#">Lorem
            </a></li>
          <li> <a class="navBar-links" href="#">lorem
            </a></li>
        </ul>
      </nav>
    </header>
</body>

Комментарии:

1. Взгляните на этот код, он решит вашу проблему.

Метки: ,