Переключить навигационное меню при нажатии на навигационные ссылки или вне - PullRequest
Новая
       38

Переключить навигационное меню при нажатии на навигационные ссылки или вне

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

Я пытался заставить мое мобильное меню навигации переключаться назад, когда я нажимаю за пределами навигационных ссылок или когда я нажимаю на одну из них. Я огляделся вокруг и нашел только jQuery пример, которого я избегаю. Я хочу иметь пример с JavaScript ES6. Итак, как я могу заставить это работать?

Вот мой код: 

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');


    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
    })


}

navSlide();
html {
  scroll-behavior: smooth;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Gelion;
  background-color: #fa555204;
}

.nav-links li a, .logo {
  text-decoration: none;
 }
 
 ul {
  list-style: none;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  height: 10%;
  padding: 20px 0;
}

.nav-links {
  display: flex;
}

.nav-links li {
  padding: 0 15px;
}

.burger{
  display: none;
}

/* Media Query - Mobile */

@media only screen and (max-width: 700px) {
    body {
      overflow-x: hidden;
    }

    /* Burger Menu */

    .nav-links {
      position: fixed;
      right: 0;
      height: 100vh;
      width: 60%;
      top: 0vh;
      background-color: var(--secondary-color);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.5s ease-in;
      z-index: 1;
    }

    .nav-links li a {
      color: #fff;
    }

    .nav-active {
      transform: translateX(0%);
    }

    .main-nav .burger {
      display: block;
      cursor: pointer;
      font-size: 35px;
    }
  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>

<nav class="main-nav">
        <a href="#" class="logo" />Logo</a>
        <ul class="nav-links">
          <li><a href="#Overview">Overview</a></li>
          <li><a href="#Contagion">Contagion</a></li>
          <li><a href="#Symptoms">Symptoms</a></li>
          <li><a href="#Prevention">Prevention</a></li>
          <li><a href="#Contact">Contact</a></li>
        </ul>
        <div class="burger">
          <i class="fas fa-bars"></i>
        </div>
      </nav>

1 Ответ

0 голосов
/ 20 апреля 2020

вы можете использовать css очень легко для этого. Использование: Focus Selector Оформить заказ по этой ссылке: https://www.w3schools.com/cssref/sel_focus.asp

или попробуйте это 

.classname:focus{
  //your code here will run while client focused in this class
}
...