Проблемы с активацией навигационной панели Hamburger?

ProgramBox

Проблемы с активацией навигационной панели Hamburger?

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть базовая панель навигации со значком гамбургера, созданная с помощью CSS, но я не могу правильно активировать навигационную панель, когда я нажимаю в любом месте за пределами навигации, это активирует анимацию для всей навигации кто-нибудь знает, почему это может быть Я пробовал искать в StackOverflow и Google, но, похоже, не могу найти свой ответ?

 // Mobile Nav
document.addEventListener("click", e => {
  if (
    e.target.matches(".menu-btn") ||
    e.target.matches(".btn-line") ||
    e.target.matches(".activate-nav")
  ) {
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector(".mobile-content").classList.toggle("hide");
}

// Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});

 .mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  width: 100%;
  top: 0;
  z-index: 3;
}

h2 {
  padding: 0.6rem;
}

.menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 20px;
}

.btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 4px 0;
  background: #333;
  z-index: 3;
  border-radius: 20%;
  cursor: pointer;
  transition: all 0.5s ease-out;
}


/*  Animation start  */

.btn-line.close:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  background: blue;
  transition: 0.5s ease;
}

.btn-line.close:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
  background: blue;
  transition: 0.5s ease;
}

.mobile-content {
  background: #333;
  width: 100vw;
  height: 100vh;
}

.mobile-item {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 80vh;
}

.mobile-items {
  font-size: 2rem;
  padding: 1rem 0;
}

.hide {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mobile Nav -->
<div class="mobile-nav">
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <div class="menu-btn">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link activate-nav">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link activate-nav">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#home" class="mobile-link activate-nav">
          <del>BLOG</del>
        </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link activate-nav">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>

1. Я не уверен, понимаю ли я. Ваша проблема в том, что при нажатии на ‘Matty’ запускается анимация? Если да, то это потому, что у вас есть событие ‘click’ в классе ‘mobile-nav’, который оборачивает всю навигационную панель.

2. Когда я нажимаю на Matty, анимация запускается на гамбургере, а когда я нажимаю на строку навигации, она возвращается на домашнюю страницу, и я бы хотел, чтобы она просто переходила на домашнюю страницу, когда нажимается только matty вот мой веб-сайт ниже, чтобы вы могли получить живой пример того, что я имею в виду, кстати, вам придется просматривать в режиме мобильного просмотра, любая помощь действительно ценится! mattyburton.com

Ответ №1:

Вероятно, из-за этого кода

 // Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});

сделайте это ie: замените mobile-nav

 $(".menu-btn").click(function() {
      $(".btn-line").toggleClass("close");
    });

Ответ №2:

Так что, может быть, попробовать заменить:

// Hamburger Animation $(".mobile-nav").click(function() { $(".btn-line").toggleClass("close"); });

Для:

$("body").on('click', '.menu-btn', function() { $(".btn-line").toggleClass("close"); });

Ответ №3:

Я просто обновил несколько скриптов в вашем коде, попробуйте это, я надеюсь, это вам поможет. Спасибо

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

 document.addEventListener("click", e => {
  if (e.target.matches(".menu-btn") ||  e.target.matches(".activate-nav")
  ) {
    if(e.target.matches(".menu-btn")){
      $(".btn-line").toggleClass("close");
    }
    toggleMenu();
  }
});

Удалите e.target.matches(".btn-line") из инструкции if, вы уже проверяете его родительский класс в инструкции if, нет необходимости проверять дочерний класс.

Также удалите приведенный ниже код jquery, он нам больше не нужен.

 // Hamburger Animation
$(".mobile-nav").click(function() {
  $(".btn-line").toggleClass("close");
});

 // Mobile Nav
document.addEventListener("click", e => {
  if (e.target.matches(".menu-btn") ||  e.target.matches(".activate-nav")
  ) {
    if(e.target.matches(".menu-btn")){
      $(".btn-line").toggleClass("close");
    }
    toggleMenu();
  }
});

function toggleMenu() {
  document.querySelector(".mobile-content").classList.toggle("hide");
}

 .mobile-nav {
  display: block;
  position: fixed;
  width: 100%;
  width: 100%;
  top: 0;
  z-index: 3;
}

h2 {
  padding: 0.6rem;
}

.menu-btn {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 14px;
  padding: 6px 0;
}

.btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 4px 0;
  background: #333;
  z-index: 3;
  border-radius: 20%;
  cursor: pointer;
  transition: all 0.5s ease-out;
}


/*  Animation start  */

.btn-line.close:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
  background: blue;
  transition: 0.5s ease;
}

.btn-line.close:nth-child(2) {
  transform: translateY(-3px) rotate(-45deg);
  background: blue;
  transition: 0.5s ease;
}

.mobile-content {
  background: #333;
  width: 100vw;
  height: 100vh;
}

.mobile-item {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  text-align: center;
  width: 100vw;
  height: 80vh;
}

.mobile-items {
  font-size: 2rem;
  padding: 1rem 0;
}

.hide {
  display: none;
}

.mobile-nav > a {
  float: left;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Mobile Nav -->
<div class="mobile-nav">
  <a href="#home">
    <h2>MATTY</h2>
  </a>
  <div class="menu-btn">
    <div class="btn-line"></div>
    <div class="btn-line"></div>
  </div>
  <nav class="mobile-content hide">
    <ul class="mobile-item">
      <li class="mobile-items">
        <a href="#about-me" class="mobile-link activate-nav">
               ABOUT
             </a>
      </li>
      <li class="mobile-items">
        <a href="#the-portfolio" class="mobile-link activate-nav">
               PORTFOLIO
             </a>
      </li>
      <li class="mobile-items">
        <a href="#home" class="mobile-link activate-nav">
          <del>BLOG</del>
        </a>
      </li>
      <li class="mobile-items">
        <a href="#contact-me" class="mobile-link activate-nav">
               CONTACT
             </a>
      </li>
    </ul>
  </nav>
</div>

1. Добавил ее на свой веб-сайт и по-прежнему безуспешно, вот ссылка на мой сайт, которая объясняет проблему подробнее, вам нужно будет перейти в режим просмотра с мобильных устройств, чтобы отобразить навигацию hamburger mattyburton.com

2. Все работает нормально, нажмите ctrl f5 и повторите попытку. Спасибо

3. Но когда вы нажимаете на центр навигационной панели, она активирует навигационную панель и возвращается на домашнюю страницу?

4. Вы перемещаете мои изменения в Javascript? Я все еще вижу ваш старый скрипт в main.js .

5. Привязка логотипа заголовка, с которой он фактически содержит полный заголовок. Я только что обновил несколько CSS, в остальном все хорошо, обновление CSS решит вашу проблему. Спасибо