Как заставить навигационные ссылки снова появляться / сбрасываться по умолчанию при изменении размера браузера после использования функции переключения javascript? - PullRequest
Новая
       26

Как заставить навигационные ссылки снова появляться / сбрасываться по умолчанию при изменении размера браузера после использования функции переключения javascript?

1 голос
/ 18 июня 2019

Я пытаюсь кодировать отзывчивый navbar, используя html / css / vanilla JS с несколькими «точками останова», то есть на 815px и ниже. Я хочу, чтобы частичная навигация отображалась в выпадающем меню ... Затем на 600px и ниже я хочу, чтобы вся навигация (кроме домашней ссылки) была в выпадающем меню.

У меня вроде как это работает с использованием 2 функций javascript и медиазапросов RWD, но после использования функций onclick классы не "сбрасываются" в состояние по умолчанию. Я понимаю, что это потому, что DOM уже загрузил CSS, и теперь функции onclick меняют свои правила CSS.

Так как же заставить навигацию вернуться к правильному отображению всего размера окна после использования функций ?? Прямо сейчас, если вы уменьшите размер до одной из точек останова и воспользуетесь функцией onclick, он больше не будет отображать навигационные ссылки, как только вы измените размер браузера в режим просмотра планшета / рабочего стола.

JS Fiddle: https://jsfiddle.net/8x32qr14/13/

Спасибо! 

var navOne = document.getElementsByClassName('navOne');
function displayNavOne() {
        for (i = 0; i < navOne.length; i++) {
          if (navOne[i].style.display === 'none' || navOne[i].style.display === '') {
            navOne[i].style.display = 'block';
            navOne[i].style.float = 'none';
            navOne[i].style.clear = 'both';
          } else {
            navOne[i].style.display = 'none';
            navOne[i].style.float = 'left';
            navOne[i].style.clear = 'none';
          }
        }
      }

      var navTwo = document.getElementsByClassName('navTwo');

      function displayNavTwo() {
        for (a = 0; a < navTwo.length; a++) {
          if (navTwo[a].style.display === 'none' || navTwo[a].style.display === '') {
            navTwo[a].style.display = 'block';
            navTwo[a].style.float = 'none';
            navTwo[a].style.clear = 'both';
          } else {
            navTwo[a].style.display = 'none';
            navTwo[a].style.float = 'left';
            navTwo[a].style.clear = 'none';
          }
        }
      }
/* font-family: 'Quicksand', sans-serif; */

body {
  background-color: gainsboro;
}

nav ul {
  list-style-type: none;
  background-color: palevioletred;
  overflow: hidden;
  border-bottom: 0.3em solid white;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  text-decoration: none;
  padding: 1em 2em;
  color: white;
  transition: 0.3s all ease;
  font-family: 'Quicksand', sans-serif;
}

nav ul li a:hover {
  background-color: whitesmoke;
  color: palevioletred;
}

.active {
  background-color: white;
  color: palevioletred;
}

.nav-container {
  margin: auto;
}

#bars,
#bars2 {
  float: right;
  color: white;
  font-size: 1.5em;
  padding: 0.4em 1em;
  display: none;
}

#bars:hover,
#bars2:hover {
  cursor: pointer;
}

@media only screen and (min-width: 1200px) {
  .nav-container {
    width: 75vw;
  }
}

@media only screen and (max-width: 815px) {
  .nav-container li:nth-child(5),
  .nav-container li:nth-child(6),
  .nav-container li:nth-child(7) {
    display: none;
  }
  #bars {
    display: block;
  }
}

@media only screen and (max-width: 600px) {
  .nav-container li:nth-child(2),
  .nav-container li:nth-child(3),
  .nav-container li:nth-child(4),
  .nav-container li:nth-child(5),
  .nav-container li:nth-child(6),
  .nav-container li:nth-child(7) {
    display: none;
  }
  #bars {
    display: none;
  }
  #bars2 {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="https://kit.fontawesome.com/4bfc31d982.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../css/reset.css" type="text/css">
    <link rel="stylesheet" href="../css/master.css" type="text/css">
  </head>

  <body>
    <header>
      <nav>
        <ul id="main-nav">
          <div class="nav-container">
            <li><a class="active" href="#">Home</a></li>
            <li class="navTwo"><a href="#">Link 2</a></li>
            <li class="navTwo"><a href="#">Link 3</a></li>
            <li class="navTwo"><a href="#">Link 4</a></li>
            <li class="navOne navTwo"><a href="#">Link 5</a></li>
            <li class="navOne navTwo"><a href="#">Link 6</a></li>
            <li class="navOne navTwo"><a href="#">Link 7</a></li>
            <li onclick="displayNavOne()" id="bars"><i class="fas fa-bars"></i></li>
            <li onclick="displayNavTwo()" id="bars2"><i class="fas fa-bars"></i></li>
          </div>
        </ul>
      </nav>
    </header>
  </body>
</html>

1 Ответ

0 голосов
/ 22 июня 2019

Попробуйте использовать функцию window.matchMedia. Например, window.matchMedia («(минимальная ширина: 600 пикселей)»). Если ширина окна соответствует ширине медиазапроса, добавьте соответствующие классы соответственно. Есть пример этого на моем GitHub с использованием одной ссылки, которая видна в меню навигации на экранах <600px (поэтому вы должны щелкнуть гамбургер, чтобы увидеть его) и увидеть на главной навигационной панели (рядом с логотипом) на экранах больше чем 600px. </p>

https://github.com/Hy-M/plants-project

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

...