Проблемы с активацией гамбургера навбар? - PullRequest
Новая
       5

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

0 голосов
/ 31 марта 2019

У меня есть базовая иконка гамбургера, панель навигации построена с использованием 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>

Ответы [ 3 ]

0 голосов
/ 31 марта 2019

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

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

на:

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

0 голосов
/ 31 марта 2019

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

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

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") из , если в операторе вы уже проверяете его родительский класс в , если в операторе нет необходимости проверять дочерний класс.

Также удалите приведенный ниже код 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>
0 голосов
/ 31 марта 2019

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

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

сделайте его т.е .: заменить mobile-nav 

$(".menu-btn").click(function() {
      $(".btn-line").toggleClass("close");
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...