Блог

 const btnHamburger = document.querySelector('#btnHamburger'); const body = document.querySelector('body'); const header = document.querySelector('.header'); const overlay = document.querySelector('.overlay'); const fadeElems = document.querySelectorAll('.has-fade');  btnHamburger.addEventListener('click', function(){  console.log('click hamburger');   if(header.classList.contains('open')){  body.classList.remove('noscroll');  header.classList.remove('open');   fadeElems.forEach(function(element){  element.classList.remove('fade-in');  element.classList.add('fade-out');  });    }  else { // Open Hamburger Menu  body.classList.add('noscroll');  header.classList.add('open');  fadeElems.forEach(function(element){  element.classList.remove('fade-out');  element.classList.add('fade-in');  });   }  }); 

 .header {  position: relative;  z-index: 1; }  .header.open .header__toggle gt; span:first-child {  -webkit-transform: rotate(45deg);  transform: rotate(45deg); }  .header.open .header__toggle gt; span:nth-child(2) {  opacity: 0; }  .header.open .header__toggle gt; span:last-child {  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg); }  .header .overlay {  opacity: 0;  position: fixed;  top: 0px;  right: 0px;  bottom: 0px;  left: 0px;  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d314d), to(transparent));  background-image: linear-gradient(#2d314d, transparent); }  .header nav {  position: relative;  background-color: white;  padding-top: 1.0625rem;  padding-bottom: 1.0625rem; }  .header__logo img {  width: 12.9125rem;  height: 4.575rem; }  .header__toggle gt; span {  display: block;  width: 26px;  height: 2px;  background-color: #2d314d;  -webkit-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;  -webkit-transform-origin: 3px 1px;  transform-origin: 3px 1px; }  .header__toggle gt; span:not(:last-child) {  margin-bottom: 5px; }  .header__menu {  position: absolute;  width: calc(100% - 3rem);  left: 50%;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);  background: white;  margin-top: 1.5rem;  padding: 1.625rem;  border-radius: 5px; }  .header__menu a {  display: block;  padding: 0.625rem;  color: #2d314d;  text-align: center; }  .header__links a {  position: relative;  font-size: 0.875rem;  color: #9698a6;  -webkit-transition: color 300ms ease-in-out;  transition: color 300ms ease-in-out; }  .header__links a:not(:last-child) {  margin-right: 32px; }  .header__links a::before {  content: "";  display: block;  position: absolute;  height: 5px;  left: 0;  right: 0;  bottom: -30px;  background: -webkit-gradient(linear, left top, right top, from(#265fd9), to(#64d9f7));  background: linear-gradient(to right, #265fd9, #64d9f7);  opacity: 0;  -webkit-transition: opacity 300ms ease-in-out;  transition: opacity 300ms ease-in-out; }  .header__links a:hover {  color: #2d314d; }  .header__links a:hover::before {  opacity: 1; } 

 lt;bodygt;  lt;a name="header" id="header"gt;lt;/agt;   lt;header class="header"gt;  lt;div class="has-fade"gt;lt;/divgt;   lt;nav class="container container--pall flex flex-jc-sb flex-ai-c"gt;  lt;a href="/" class="header__logo"gt;  lt;img src="./images/img.png" alt="A" /gt;  lt;/agt;   lt;a id="btnHamburger" href="#" class="header__toggle hide-for-desktop"gt;  lt;spangt;lt;/spangt;  lt;spangt;lt;/spangt;  lt;spangt;lt;/spangt;  lt;/agt;   lt;div class="header__links hide-for-mobile"gt;  lt;a href="#text"gt;Textlt;/agt;lt;a href="#text"gt;Textlt;/agt;lt;a href="#text"gt;Textlt;/a  gt;lt;a href="#"gt;textlt;/agt;lt;a href="text"gt;Textlt;/agt;  lt;/divgt;   lt;a href="/" class="button header__cta hide-for-mobile"  gt;Emaillt;/agt;  lt;a href="/" class="button header__cta hide-for-mobile"  gt;011lt;/agt;  lt;/navgt;   lt;div class="header__menu has-fade"gt;  lt;a href="/"gt;index 1lt;/agt;  lt;a href="#feature"gt;index 2lt;/agt;  lt;a href="#articles"gt;index 3lt;/agt;  lt;a href=""gt;index 4lt;/agt;  lt;a href=""gt;index 5lt;/agt;  lt;/divgt; 

 const container = document.querySelector(".header__menu");  // then add event listener  container.addEventListener("click", () =gt; {  header.classList.remove("open");  overlay.classList.remove("fade-in");  container.classList.add("fade-out");  body.classList.remove("noscroll"); });