jQuery slideDown snap after page reload

user_15877429 0
Viewed 118

I have already asked this question but didn't get any answers so I'll try once again.

I have built a navigation menu on WordPress using jQuery to have a slide down/up animation on the submenus. I am using flexbox on the submenus which is what seems to cause the problems. When I change it to block it works fine but the design is not what I am looking for.

The problem and how to recreate it: The first time you refresh the page (or run the code on jsfiddle) and hover over the menu, the submenu will slide down over the height it should stop at and snap back after that. After that all the other submenus work fine. It's just I would like to fix that snap back since it does not look that good.

Does anyone have an idea why this is happening and/or how to fix it?

Link for the jsfiddle where you can test the problem yourself: https://jsfiddle.net/u2zs38oL/

And the code for the jsfiddle below:

HTML:

<header>
    <nav class="main-navigation" id="desktop-navigation">
        <div class="container-fluid">
            <div class="menu-menu-1-container">
                <ul id="menu-menu-2" class="d-flex justify-content-center">
                    <li
                        class="has-mega-menu menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-92">
                        <a href="#">Test</a>
                        <ul class="sub-menu">
                            <li
                                class="mega-menu-column menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-93">
                                <a
                                    href="#">Test</a>
                                <ul class="sub-menu">
                                    <li
                                        class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-94">
                                        <a
                                            href="#/">Test</a></li>
                                </ul>
                            </li>
                            <li
                                class="mega-menu-column menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-149">
                                <a href="#">Test</a>
                                <ul class="sub-menu">
                                    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150">
                                        <a href="#">Test</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

CSS:

header .main-navigation {
  display: block;
  margin-left: 1rem!important;
  margin-right: 1rem!important;
  text-transform: uppercase;
}

header .main-navigation > div {
  background: #000;
  position: relative;
}

header .menu-menu-1-container {
  height: 50px;
  white-space: initial;
}

header #menu-menu-2 {
  list-style: none;
  margin: 0;
  flex-direction: row;
}

header #menu-menu-2 > .menu-item {
  padding: 0 20px;
  height: 50px;
  border-bottom: 3px solid;
  border-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;

}

header #menu-menu-2 .menu-item:hover {
  border-color: red;
  transition: 0.1s ease-in-out;
}

header #menu-menu-2 > li:hover > a {
  color: red;
}

header .has-mega-menu > .sub-menu {
  position: absolute;
  background: #fff;
  top: 50px;
  left: 0;
  width: 100%;
  display: none;
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}



header #menu-menu-2 li, header #menu-menu-2 ul {
  list-style: none;
  padding: 0;
}

header #menu-menu-2 li a {
  text-decoration: none;
}

header #menu-menu-2 > li > a {
  color: #fff;
}


header .has-mega-menu a {
  color: #000;
}

header .mega-menu-column {
  margin-left: 10px;
  margin-top: 25px;
  margin-bottom: 25px;
  padding: 0 15px!important;
}

header .mega-menu-column > a {
  position: relative;
  font-weight: 600;
  letter-spacing: 1px;
  padding-bottom: 10px;
  pointer-events: none;
}

header .mega-menu-column > a::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 14px;
  bottom: 0;
  background-color: #000;
  opacity: 0.2;
}

header .mega-menu-column ul {
  margin-top: 20px;
}

header .mega-menu-column ul li {
  padding: 5px 0!important;
}

header .mega-menu-column ul a {
  color: grey;
  font-weight: 400;
  line-height: 25px;
  transition: all 0.3s ease-in-out;
  text-transform: capitalize;
  display: block;
}

header .mega-menu-column ul li a:hover {
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out;
  -ms-transition: -ms-transform 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
  color: #000;
  border-bottom: 1px solid red;
}

.d-flex {
  display: flex;
}

.justify-content-center {
  justify-content: center;
}

jQuery:

jQuery(document).ready(function() {
    
    jQuery('.main-navigation .has-mega-menu').hover(function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideDown({start: function() { 
            jQuery(this).css('display', 'flex');
          }, duration: 250
        });
        jQuery(this).children('.sub-menu').css('z-index', '3')
    }, function() {
        jQuery(this).has('.sub-menu').children('.sub-menu').stop().slideUp(250);
        jQuery(this).children('.sub-menu').css('z-index', '2')
    });
});
drop-down-menu css html jquery javascript
1 Answers

I found a way around this problem (at least for my case). So I found if on page reload, the submenu that is hidden and shown, has display flex instead of none then there seems to be no problems with the snapping. But obviously I do not want to start with the menu opened.

So what I did was set the submenu to flex and hid the menu with z-index until the jQuery has loaded and then hid (set display none) the submenu with jQuery. Then when hovering over the menu item toggled the slideDown and added higher z-index to that object.

Fiddle can be found here: https://jsfiddle.net/e319ydkm/

Changes I made to the original code: 

header .has-mega-menu > .sub-menu {
  display: none -> flex;
  z-index: -1;
}
.hide-under {
  background: #fff;
  z-index: 1;
  height: 1000px;
}

jQuery('.main-navigation .has-mega-menu > .sub-menu').hide();

This of course is not a perfect solution and I couldn't really figure out what is causing it other than that it is caused by flexbox (probably). I will not mark this reply as an answer since this isn't really the solution.

user_158774290
Related