CODEWITHSUNDEEP
htmljquerycssmenu
Syniscoborn
Syniscoborn

Reputation: 55

Menu that is deleted when I click on a link

I would like that when the window is 768px or less and if I click on one of the links it will bring me to the right place. Currently, it only goes down but the menu remains open and the cross remains activated.

I added the last part with the each but it doesn't work properly and makes my menu disappear when I click on a link and in a case where the window is larger than 768px.

$(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');
  })
});
.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>

Upvotes: 1

Views: 59

Answers (2)

Always Helping
Always Helping

Reputation: 14570

You can check the innerWidth you screen and see if its more then >= 768 then return false and do not do anything or else you can addClass and removeClass from your menu items.

Add this code:

$('.menu-item').click(function() {
  if (window.innerWidth >= 768) {
    return false
  } else {
    $('.nav__menu').removeClass('is-open')
    $('.nav__burger').removeClass('is-active');
  }
})

Upvotes: 1

Thanasis Balatsoykas
Thanasis Balatsoykas

Reputation: 176

you are missing from your css the is-open class.

.header .is-open {
    opacity: 1;
}

Furthermore you will need to change the resize function as following

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

So in case the windoe is >= 768 the nav burger is active.

Upvotes: 1

Related Questions