CODEWITHSUNDEEP
htmljquerycss
CH.Chu
CH.Chu

Reputation: 21

The navbar responsive issue when I resize the browser width

The Burger bar animation & nav tag doesn't work when I resize the browser width. But when I refresh the page it shows and works. So I need to refresh the page every time when I resize the window width to make it work.

I code with Bootstrap v5.2 and jQuery.I have struggled with this problem for a while. Please help me up.

Many Thanks.

/*navigation icon animation*/
let trigger = 'X';

jQuery(document).ready(function() {
  $('#toggle-menu').click(function() {
    trigger = 'X';
    $(this).toggleClass('menu-is-active')
  });

  /* click outside of nav to trigger navigation icon animation*/
  $(document).click(function() {
    if (trigger == 'X') {
      $("#toggle-menu").toggleClass();
      trigger = 'ham';
    }
  });

  $("nav").click(function(e) {
    e.stopPropagation();
    return false;
  });
});


/*toggle Nav menu Background up & down*/
if ($(window).width() <= 768) {
  $('#toggle-menu').on('click', function() {
    if ($('.nav').is(':visible')) {
      $('.nav').animate({
        height: '0'
      }, function() {
        $(this).hide();
      });
    } else {
      $('.nav').show();
      $('.nav').animate({
        height: '180'
      });
    }
  });
}

/* Click outside of nav to close Toggle*/
if ($(window).width() <= 768) {
  $(document).click(function() {
    $(".nav").hide();
  });
  $("#toggle-menu").click(function(e) {
    e.stopPropagation();
    return false;
  });
}
/*-- Nav Bar --*/

header a {
  color: #ffffff;
  text-decoration: none;
}

header a:focus,
a:hover {
  color: #a7a7a7;
}

header a:active {
  color: #b8b8b8;
}

header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
  z-index: 2;
}

.logo {
  float: left;
  cursor: pointer;
  text-decoration: none;
}

.nav {
  float: right;
}

.nav>li {
  display: inline-block;
  padding-right: 20px;
  font-size: 0.9rem;
}

.nav>li:last-child {
  padding-right: 10px;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -3px;
  left: 0;
  background-color: #f0bc1f;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.language {
  text-decoration: none;
  color: #ffffff;
}

.header-divider {
  position: absolute;
  border-top: 1.5px solid white;
  width: 50%;
  z-index: 2;
  right: 0px;
  top: 25px;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    display: none;
    background-color: #d3d3d33f;
    left: 0px;
    top: 39px;
  }
  .nav li:hover {
    background-color: #f0bc1f;
    transition: ease-in-out;
  }
  .nav li a:hover {
    color: #000000;
  }
  .nav>li {
    display: block;
    float: center;
    padding: 8px 0px;
  }
  .nav>li:last-child {
    border-bottom: none;
  }
  .hover-underline-animation {
    display: block;
    position: relative;
    color: white;
    text-decoration: none;
  }
  .hover-underline-animation:hover {
    background-color: #f0bc1f;
  }
  .hover-underline-animation:after {
    content: '';
    position: absolute;
    display: none;
  }
  /*--- logo ---*/
  .logo {
    float: left;
    display: block;
    cursor: pointer;
  }
  /*--- Navigation Burger Menu ---*/
  #toggle-menu {
    float: right;
    display: block;
    cursor: pointer;
    margin-right: 20px;
  }
  #toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
  }
  #toggle-menu .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }
  #toggle-menu span.bar1 {
    top: 0px;
  }
  #toggle-menu span.bar2,
  .bar3 {
    top: 8px;
  }
  #toggle-menu span.bar4 {
    top: 16px;
  }
  /*--- Burger Menu Animation---*/
  #toggle-menu.menu-is-active .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }
  #toggle-menu.menu-is-active span.bar1 {
    top: 0px;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    background-color: transparent;
  }
  #toggle-menu.menu-is-active span.bar4 {
    top: 16px;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    background-color: transparent;
  }
  #toggle-menu.menu-is-active span.bar2 {
    top: 8px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #toggle-menu.menu-is-active span.bar3 {
    top: 8px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
<header class="container-fluid bg-dark">
  <a href="#" class="logo">CCH</a>
  <a id="toggle-menu">
    <div id="barcontainer">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
      <span class="bar bar4"></span>
    </div>
  </a>
  <ul class="nav">
    <li><a href="#" class="hover-underline-animation">Home</a></li>
    <li><a href="#" class="hover-underline-animation">About us</a></li>
    <li><a href="#" class="hover-underline-animation">Service</a></li>
    <li><a href="#" class="hover-underline-animation">Contact</a></li>
    <li><a href="#" class="hover-underline-animation">Career</a></li>
    <li><a href="#" class="language">中文/En</a></li>
  </ul>
</header>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Upvotes: 2

Views: 53

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue with your current code is because you only check the window widths when the page loads, not when it resizes.

That being said you can make the code much more simple by toggling a class on the button. You can then use CSS transitions to animate the state of the menu based on the @media rules.

The only thing that's required in JS to make this work is to remove the class from the burger when the screen resizes in order to hide the menu once more.

jQuery($ => {
  $('#toggle-menu').on('click', e => {
    $(e.currentTarget).toggleClass('menu-is-active')
  });
});

$(window).on('resize', () => {
    $('#toggle-menu').removeClass('menu-is-active');
});
body {
  background-color: #333;
}

header a {
  color: #ffffff;
  text-decoration: none;
}

header a:focus,
a:hover {
  color: #a7a7a7;
}

header a:active {
  color: #b8b8b8;
}

header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
  z-index: 2;
}

.logo {
  float: left;
  cursor: pointer;
  text-decoration: none;
}

.nav {
  float: right;
}
.nav.show {
  display: block;
}

.nav>li {
  display: inline-block;
  padding-right: 20px;
  font-size: 0.9rem;
}

.nav>li:last-child {
  padding-right: 10px;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -3px;
  left: 0;
  background-color: #f0bc1f;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.language {
  text-decoration: none;
  color: #ffffff;
}

.header-divider {
  position: absolute;
  border-top: 1.5px solid white;
  width: 50%;
  z-index: 2;
  right: 0px;
  top: 25px;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    opacity: 0;
    background-color: #d3d3d33f;
    left: 0px;
    top: 39px;
    height: 0;
    transition: height 0.25s, opacity 0.25s;
  }
  
  #toggle-menu.menu-is-active + ul.nav {
     opacity: 1;
     height: 200px;
  }

  .nav li:hover {
    background-color: #f0bc1f;
    transition: ease-in-out;
  }

  .nav li a:hover {
    color: #000000;
  }

  .nav>li {
    display: block;
    float: center;
    padding: 8px 0px;
  }

  .nav>li:last-child {
    border-bottom: none;
  }

  .hover-underline-animation {
    display: block;
    position: relative;
    color: white;
    text-decoration: none;
  }

  .hover-underline-animation:hover {
    background-color: #f0bc1f;
  }

  .hover-underline-animation:after {
    content: '';
    position: absolute;
    display: none;
  }

  /*--- logo ---*/
  .logo {
    float: left;
    display: block;
    cursor: pointer;
  }

  /*--- Navigation Burger Menu ---*/
  #toggle-menu {
    float: right;
    display: block;
    cursor: pointer;
    margin-right: 20px;
  }

  #toggle-menu div {
    width: 15px;
    height: 15px;
    position: relative;
  }

  #toggle-menu .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }

  #toggle-menu span.bar1 {
    top: 0px;
  }

  #toggle-menu span.bar2,
  .bar3 {
    top: 8px;
  }

  #toggle-menu span.bar4 {
    top: 16px;
  }

  /*--- Burger Menu Animation---*/
  #toggle-menu.menu-is-active .bar {
    padding: 0;
    width: 25px;
    height: 3px;
    background-color: rgb(255, 255, 255);
    display: block;
    border-radius: 3px;
    transition: all 0.4s ease-in-out;
    position: absolute;
  }

  #toggle-menu.menu-is-active span.bar1 {
    top: 0px;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    background-color: transparent;
  }

  #toggle-menu.menu-is-active span.bar4 {
    top: 16px;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    background-color: transparent;
  }

  #toggle-menu.menu-is-active span.bar2 {
    top: 8px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  #toggle-menu.menu-is-active span.bar3 {
    top: 8px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
}
<header class="container-fluid bg-dark">
  <a href="#" class="logo">CCH</a>
  <a id="toggle-menu">
    <div id="barcontainer">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
      <span class="bar bar4"></span>
    </div>
  </a>
  <ul class="nav">
    <li><a href="#" class="hover-underline-animation">Home</a></li>
    <li><a href="#" class="hover-underline-animation">About us</a></li>
    <li><a href="#" class="hover-underline-animation">Service</a></li>
    <li><a href="#" class="hover-underline-animation">Contact</a></li>
    <li><a href="#" class="hover-underline-animation">Career</a></li>
    <li><a href="#" class="language">中文/En</a></li>
  </ul>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Here's a working example in jsFiddle - it's easier to see the resize logic working here as you can drag the frames.

Upvotes: 1

Related Questions