Navbar не работает должным образом на другом размере экрана - PullRequest
Новая
       5

Navbar не работает должным образом на другом размере экрана

1 голос
/ 20 февраля 2020

Я пытаюсь создать многоэкранную совместимую навигационную панель (в основном, для мобильных и настольных пользователей). Я создал стиль, который хочу для панели навигации, однако у меня есть небольшая проблема: при развертывании панели навигации на средних устройствах (768 пикселей или ниже), а затем при закрытии, если пользователь меняет размер разрешения на> 768 пикселей, боковая панель навигации не показывает. 

function sideNavAction() {
  let sidenav = document.getElementById("sideNavBar");
  console.log(window.getComputedStyle(sidenav).display);
  if (window.getComputedStyle(sidenav).display == "none") {
    sidenav.style.display = "block";
  } else {
    sidenav.style.display = "none";
  }
}
html,
body {
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Poppins", sans-serif;
}

.mobile-nav {
  height: 70px;
  width: 100%;
  position: fixed;
  background-color: darkblue;
  color: grey;
}

.nav-brand {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #1a1a27;
}

.nav-heading {
  display: inline-block;
}

.nav-heading h2 {
  color: white;
  white-space: nowrap;
}

.nav-icon {
  text-align: center;
}

.sidenav {
  display: none;
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: width 0.5s;
}

.sidenav .nav-brand {
  padding: 25px 20px;
  height: 50px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.sidenav .nav-heading h2 {
  margin: 0;
  color: white;
  white-space: nowrap;
  opacity: 1;
  max-width: 0;
  transition: 0.16s;
}

#expand-icon {
  transition: transform 0.5s;
}

#sidenav-links {
  margin: 15px 0px;
}

.sidenav-links a {
  padding: 10px 18px;
  display: block;
  text-decoration: none;
  color: #9697aa;
  white-space: nowrap;
}

.link {
  display: inline-block;
  font-size: 20px;
  padding-left: 15px;
  vertical-align: middle;
  color: #9697aa;
  opacity: 1;
  max-width: 100vw;
}

.active {
  background-color: #1b1b28;
}

.active i {
  color: #5d78ff;
}

.active .link {
  color: white;
}

.fas {
  vertical-align: middle;
}

@media only screen and (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
  .sidenav {
    display: block;
  }

  .sidenav .nav-brand {
    display: flex;
  }

  .sidenav:not(:hover) {
    width: 75px;
  }

  .sidenav:not(:hover) .nav-heading h2 {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    transition: 0.1s 0.2s;
  }

  .sidenav:not(:hover) #expand-icon {
    transform: rotate(180deg);
  }

  .sidenav-links a:hover {
    background-color: #1b1b28;
    color: #5d78ff;
  }

  .sidenav-links a:hover .link {
    color: white;
    transition: none;
  }

  .sidenav:not(:hover) .link {
    opacity: 0;
    max-width: 0;
    visibility: hidden;
    transition: 0.1s 0.2s;
  }
}

@media only screen and (max-width: 768px) {
  .sidenav .nav-brand {
    display: none;
  }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online CV</title>
    <link href="test.css" rel="stylesheet" type="text/css" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />

    <script
      src="https://kit.fontawesome.com/6cc49d804e.js"
      crossorigin="anonymous"
    ></script>
    <script src="scripts.js"></script>
  </head>

  <body>
    <div class="mobile-nav">
      <div class="nav-brand">
        <div class="nav-heading">
          <h2>Navbar</h2>
        </div>

        <div class="nav-icon">
          <button onclick="sideNavAction()">
            <i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="sidenav" id="sideNavBar">
      <div class="nav-brand">
        <div class="nav-heading">
          <h2>Navbar</h2>
        </div>
        <div class="nav-icon">
          <i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
        </div>
      </div>

      <div class="sidenav-links">
        <a class="active" href="#">
          <i class="fas fa-fw fa-id-card fa-2x"></i>
          <p class="link">Link 1</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          <p class="link">Link 2</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-briefcase fa-2x"></i>
          <p class="link">Link 3</p>
        </a>

        <a href="#">
          <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          <p class="link">Link 4</p>
        </a>
      </div>
    </div>
  </body>
</html>

Я понимаю, что моя функция JS является причиной этого, так как она устанавливает отображение боковой навигационной панели на «нет», но Я не могу придумать элегантного решения.

Ответы [ 3 ]

1 голос
/ 20 февраля 2020

Пара вещей.

  1. Встроенные списки событий недовольны. Лучше прослушивать события кликов с помощью Javascript.

  2. . Вы добавили стиль display: none;, и отсутствует EventListener или медиа-запрос для его изменения после увеличения ширины за порог.

Эта кодовая ручка имеет вышеуказанные настройки:

https://codepen.io/riza-khan/pen/poJEOYE?editors=1111

И должна работать как положено.

Однако я добавил медиа-запрос и нацелил класс nav на тег !important. Это в идеале никогда не должно быть сделано. Я бы предложил удалить !important и поиграться с кодом, пока он не будет работать без него.

Надеюсь, это помогло.

0 голосов
/ 22 марта 2020

Благодаря @chriskirknielsen, я смог найти решение, которое устранило проблему, с которой я столкнулся. 

/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
  let sidenav = document.getElementById("sideNavBar");
  if (sidenav.classList.contains("sidenav-mobile-visible")) {
    sidenav.classList.remove("sidenav-mobile-visible");
  } else {
    sidenav.classList.add("sidenav-mobile-visible");
  }
}

Затем добавил это в мой css файл 

.sidenav-mobile-visible {
  display: block;
}
0 голосов
/ 20 февраля 2020

Почему вы не используете Bootstrap компонент "navbar"? Это решение вашей проблемы. Bootstrap navbar отзывчив для настольных и мобильных устройств. Вы не обязаны указывать размеры экрана в пикселях. Вот ссылка на библиотеку Bootstrap. Вы должны просто интегрировать Bootstrap в документ html через Bootstrap CDN по указанной ссылке.

https://getbootstrap.com/docs/4.4/components/navbar/

...