jQuery menu opens and collapses on page load

Question

I have a problem with this menu made in jQuery and CSS. Whenever a page loads the menu opens and collapses in a split second. Thus, it is closed, but the animation just shows in the split second on every page load.

I am not sure what exactly is causing this.

How do I prevent that from happening - remove the on-page-load animation?

jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });
});

#slide-in-open {
  cursor: pointer;
}

.line {
  display: block;
  position: absolute;
  height: 1px;
  width: 90%;
  background: #0790a4;
  border-radius: 9px;
  opacity: 1;
  -webkit-transition: .1s ease-in-out;
  -moz-transition: .1s ease-in-out;
  -o-transition: .1s ease-in-out;
  transition: .1s ease-in-out;
}

.line-2 {
  top: 6px;
}

.line-3 {
  top: 12px;
}

#slide-in-open.open .line-1 {
  top: 6px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
  display: none;
}

#slide-in-open.open .line-3 {
  top: 6px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.slide-in-menu {
  right: 0 !important;
  opacity: 1 !important;
  position: fixed;
}

.slide-in-menu-container {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

jQuery menu opens and collapses on page load

0 Answers