Проблема со скриптом jQuery для изменения меню при изменении размера браузера с помощью мультимедийных запросов

#jquery #resize

#jquery #изменение размера

Вопрос:

У меня проблема с моим кодом jQuery.

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

Сердечно.

 if (window.innerWidth >= 768 amp;amp; !$('.nav__menu').hasClass('is-open')) {
  $('.nav__menu').addClass('is-open');
} else {
  if ($('.nav__menu').hasClass('is-open')) {
    $('.nav__burger').addClass('is-active');
  }
  $('.nav__burger').on('click', function() {
    if ($(this).hasClass('is-active')) {
      $(this).removeClass('is-active');
      $('.nav__menu').removeClass('is-open');
    } else {
      $('.nav__menu').addClass('is-open');
      $(this).addClass('is-active');
    }
  });
}  
 .header .nav__burger {
  height: 37px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  position: absolute;
}

.header .nav__burger.is-active span {
  background: transparent;
}

.header .nav__burger.is-active span::before {
  transform: translateY(-2px) rotate(45deg);
}

.header .nav__burger.is-active span::after {
  transform: rotate(-45deg);
}

.header .nav__burger span {
  position: relative;
}

.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #000;
  display: block;
  transition: transform 0.5s, background 0.3s;
}

.header .nav__burger span::after,
.header .nav__burger span::before {
  position: absolute;
}

.header .nav__burger span::before {
  transform-origin: 0 50%;
  top: -6px;
}

.header .nav__burger span::after {
  bottom: -6px;
  transform-origin: 0 50%;
}

.header .nav__menu {
  z-index: 1;
  display: flex;
  position: fixed;
  background: #e9bf2b;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.header .nav__menu a {
  transition: color 0.2s;
  text-decoration: none;
  letter-spacing: 0.07em;
  color: #000;
  text-transform: uppercase;
  font: 700 125% mostra-nuova, sans-serif;
  position: relative;
  display: inline-block;
}

.header .nav__menu a:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #952929;
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(13px);
}

.header .nav__menu a:hover::after {
  opacity: 1;
  transform: translateY(3px);
}

.header .nav__menu>* {
  transform: translateY(-10px);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.header .nav__menu>*:nth-child(2n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(3n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(4n) {
  transition-delay: 0.1s;
}

.header .nav__menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.header .nav__menu.is-open>* {
  opacity: 1;
  transform: translateY(0px);
}

.header .nav__menu>* * {
  margin-left: 0;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .header .nav__burger {
    display: none;
  }
  .header .nav__menu {
    opacity: 0;
    background: none;
    flex-direction: row;
    justify-content: normal;
    align-items: normal;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: initial;
    right: initial;
  }
  .header .nav__menu a {
    color: #000;
    font-size: 87.5%;
  }
  .header .nav__menu>* * {
    margin-top: 0;
    margin-left: 30px;
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
  <div class="container">
    <button class="nav__burger">
      <span></span>
    </button>
    <header class="nav">
      <ul class="nav__menu">
        <li class="menu-item">
          <a href="#">Home</a>
        </li>
        <li class="menu-item">
          <a href="#">Services</a>
        </li>
        <li class="menu-item">
          <a href="#">Portfolio</a>
        </li>
      </ul>
    </header>
  </div>
</section>  

Ответ №1:

Кажется, что ваш код в порядке, требуется небольшое изменение, но ваша логика неверна. Когда окно resize открывается, вам нужно следить за изменением размера event с помощью jQuery.

Мы можем обернуть if (window.innerWidth >= 768) {}) логин в функцию и вызвать эту функцию в окне resize .

 //Resize window
function resize() {
  if (window.innerWidth >= 768) {
    $('.nav__menu').addClass('is-open');
  } else {
    $('.nav__menu').removeClass('is-open');
    $('.nav__burger').removeClass('is-active');
}
}

//watch window resize
$(window).on('resize', function(){
  resize() 
});
  

При открытии страницы loads вы можете снова вызвать $( document ).ready(function() {}) ту же функцию, чтобы проверить, есть ли innerwidth >= 768 она, если она есть, затем продолжить с логикой или удалить is-open класс.

 $( document ).ready(function() {
  resize() //load on document ready
})
  

Вы размещаете свою click функцию переключения меню вне своего, если где угодно, потому что это будет работать только тогда, когда меню переключается visible .

Живая рабочая демонстрация: (запустите snippet и нажмите full screen и закройте весь экран, чтобы увидеть, что все работает)

 $(document).ready(function() {
  resize() //load on document ready
})

//Resize window
function resize() {
  if (window.innerWidth >= 768) {
    $('.nav__menu').addClass('is-open');
  } else {
    $('.nav__menu').removeClass('is-open');
    $('.nav__burger').removeClass('is-active');
  }
}

//watch window resize
$(window).on('resize', function() {
  resize()
});

//Click function
$('.nav__burger').on('click', function() {
  // console.log('fdfd')
  if ($(this).hasClass('is-active')) {
    $(this).removeClass('is-active');
    $('.nav__menu').removeClass('is-open');
  } else {
    $('.nav__menu').addClass('is-open');
    $(this).addClass('is-active');
  }
});  
 .header .nav__burger {
  height: 37px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 2;
  position: absolute;
}

.header .nav__burger.is-active span {
  background: transparent;
}

.header .nav__burger.is-active span::before {
  transform: translateY(-2px) rotate(45deg);
}

.header .nav__burger.is-active span::after {
  transform: rotate(-45deg);
}

.header .nav__burger span {
  position: relative;
}

.header .nav__burger span,
.header .nav__burger span::before,
.header .nav__burger span::after {
  content: '';
  width: 20px;
  height: 3px;
  background: #000;
  display: block;
  transition: transform 0.5s, background 0.3s;
}

.header .nav__burger span::after,
.header .nav__burger span::before {
  position: absolute;
}

.header .nav__burger span::before {
  transform-origin: 0 50%;
  top: -6px;
}

.header .nav__burger span::after {
  bottom: -6px;
  transform-origin: 0 50%;
}

.header .nav__menu {
  z-index: 1;
  display: flex;
  position: fixed;
  background: #e9bf2b;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.header .nav__menu a {
  transition: color 0.2s;
  text-decoration: none;
  letter-spacing: 0.07em;
  color: #000;
  text-transform: uppercase;
  font: 700 125% mostra-nuova, sans-serif;
  position: relative;
  display: inline-block;
}

.header .nav__menu a:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #952929;
  content: '';
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  transform: translateY(13px);
}

.header .nav__menu a:hover::after {
  opacity: 1;
  transform: translateY(3px);
}

.header .nav__menu>* {
  transform: translateY(-10px);
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}

.header .nav__menu>*:nth-child(2n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(3n) {
  transition-delay: 0.1s;
}

.header .nav__menu>*:nth-child(4n) {
  transition-delay: 0.1s;
}

.header .nav__menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.header .nav__menu.is-open>* {
  opacity: 1;
  transform: translateY(0px);
}

.header .nav__menu>* * {
  margin-left: 0;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .header .nav__burger {
    display: none;
  }
  .header .nav__menu {
    opacity: 0;
    background: none;
    flex-direction: row;
    justify-content: normal;
    align-items: normal;
    position: absolute;
    top: 20px;
    left: 20px;
    bottom: initial;
    right: initial;
  }
  .header .nav__menu a {
    color: #000;
    font-size: 87.5%;
  }
  .header .nav__menu>* * {
    margin-top: 0;
    margin-left: 30px;
  }
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="header">
  <div class="container">
    <button class="nav__burger">
      <span></span>
    </button>
    <header class="nav">
      <ul class="nav__menu">
        <li class="menu-item">
          <a href="#">Home</a>
        </li>
        <li class="menu-item">
          <a href="#">Services</a>
        </li>
        <li class="menu-item">
          <a href="#">Portfolio</a>
        </li>
      </ul>
    </header>
  </div>
</section>  

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

1. Можете ли вы помочь мне в последней части, пожалуйста?

2. @Syniscoborn В resize функцию вам просто нужно добавить этот код if (window.innerWidth <= 768) { , чтобы проверить, не меньше ли размер окна 768 пикселей, а затем вы можете делать все, что вам нужно.

3. Это >=768 когда я должен делать каждый.

4. @Syniscoborn Извините, я вас не улавливаю. Я не уверен, что вы пытаетесь сделать сейчас. Похоже, это еще одна вещь, которую вы хотите сделать — не могли бы вы задать другой вопрос. Чтобы можно было дать правильный ответ.

5. Вы можете увидеть мой вопрос внизу этого сообщения с каждым, но я должен опубликовать еще один?

Ответ №2:

Это работает, но теперь я хотел бы, чтобы, когда размер окна составляет 768 пикселей или меньше, и я нажимаю на одну из ссылок, это приведет меня в нужное место. В настоящее время он только отключается, но меню остается открытым, а крест остается активированным.

 $(document).ready(function() {
    resize()
});
  
function resize() {
    if (window.innerWidth >= 768) {
        $('.nav__menu').addClass('is-open');
    } else if ($('.nav__menu').hasClass('is-open')) {
        $('.nav__menu').removeClass('is-open');
    }

}

$(window).on('resize', function() {
resize()
});

$('.nav__burger').on('click', function() {
    if ($(this).hasClass('is-active')) {
        $(this).removeClass('is-active');
        $('.nav__menu').removeClass('is-open');
    } else {
        $('.nav__menu').addClass('is-open');
        $(this).addClass('is-active');
    }
});

$('.menu-item').each(function() {
    $(this).click(function() {
        $('.nav__menu').removeClass('is-open')
        $('.nav__burger').removeClass('is-active');
    })
});
  

Я добавил последнюю часть с каждым, но она не работает должным образом и заставляет мое меню исчезать, когда я нажимаю на ссылку и в случае, когда окно больше 768 пикселей