Question 165269 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Is there a problem w/ the WordPress mobile side menu transition when I press close?

On the website down below, when I close the side menu in mobile, I can see the body of the menu close faster than the texts and search icon. Why did this happen? Why they don’t close together?
I used the Divi plugin on WordPress but I think there isn’t any conflict.
It opens and closes smoothly and well on the desktop.

https://wordpress-602494-1949747.cloudwaysapps.com/

<script>
 let isMenuOpen = false;  
 const menuHandler = document.querySelector('.menu_left_handler');
 const menuTitle = document.querySelector('.menu_left_title');
 const menuRight = document.querySelector('.menu_right');
 menuHandler.addEventListener('click', () => {
    isMenuOpen ? menuRight.classList.remove('menu_right__open') : menuRight.classList.add('menu_right__open');
    isMenuOpen = !isMenuOpen;
    menuHandler.innerText === '☰' ? (menuHandler.innerText = '✕') : (menuHandler.innerText = '☰');
    menuTitle.innerText === 'MENY' ? (menuTitle.innerText = 'STÄNG') : (menuTitle.innerText = 'MENY');
 });

let x = window.matchMedia("(max-width: 768px)")
  function mediaQ(x) {
    if (x.matches) {
      menuHandler.addEventListener('click', () => {
        let mobileMenu = document.getElementById("menuId")
        mobileMenu.classList.toggle("menu_right__open");
         });    
    }
  }
    #menuId {
       background: #171717;
       border-radius: 0 1rem 1rem 0;
       padding: 1rem;
       display: inline-flex;
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: flex-start;
       align-items: flex-start;
       align-content: stretch;
       color: #fff;
          font-family: 'museo-sans', sans-serif !important;
      height: 30rem;
              
    }
  .menu {
    height: 25rem;
  }

    #menu a {
       color: #fff;
    }

    .menu_right {
       max-width: 0;
       overflow: hidden;
      transition: max-width 0.3s;
    }

    .menu_right__open {
       max-width: 100rem !important;
      height: 25rem;
      transition: max-width 2s;
    }

    .menu_right ul {
       list-style: none;
       width: 20rem;
       padding-top: 5rem;
       padding-left: 2rem;
        line-height: 35px;
    }

    .menu_right ul a {
       display: block;
       text-decoration: none;
       margin: 1rem 0;
       font-size: 20px;
    }
   
   .menu_right ul a:hover {
        color: #F7B660 ;
   }

    .menu_left {
       display: flex;
       flex-direction: column;
       flex-wrap: nowrap;
       justify-content: flex-start;
       align-items: center;
       align-content: center;
       font-size: 20px;
    }

    .menu_left_title {
        font-family: 'museo-sans', sans-serif !important;
        font-size: 20px;
       writing-mode: tb-rl;
       transform: rotate(-180deg);
       margin-top: 1rem;
       padding: 0.3rem;
    }

    .menu_left_handler {
       padding: 0.5rem;
       cursor: pointer;
      font-size: 35px;
    }
   
   @media screen and (max-width: 768px) {
     #menuId {
       height: 5rem;
     }
     .menu {
        height: 5rem;
     }
     .menu_left_title {
       display: none;
     }
     .menu_right__open {
       height: 26rem !important;
       overflow-y: none !important;
       border-radius: 2px;
       transition: max-width 4s;
     }
     .menu_right {
       transition: max-width 0.3s;
     }
     .menu_right ul a {
     }
      .menu_left_handler {
       padding: 0.5rem;
       cursor: pointer;
      font-size: 18px;
    }

}
<body>

 <div id="menuId" class="menu">
    <div class="menu_left">
       <div class="menu_left_handler">☰</div>
       <div class="menu_left_title">MENY</div> 
    </div>
    <div class="menu_right">
      <div class="et_pb_with_border et_pb_module et_pb_search et_pb_search_0_tb_header  et_pb_text_align_left et_pb_bg_layout_light et_pb_hide_search_button">
              
              
              <form role="search" method="get" class="et_pb_searchform" action="https://wordpress-602494-1949747.cloudwaysapps.com/">
                  <div>
                      <label class="screen-reader-text" for="s">Search for:</label>
                      <input type="text" name="s" placeholder="" class="et_pb_s">
                      <input type="hidden" name="et_pb_searchform_submit" value="et_search_proccess">
                      
                      <input type="hidden" name="et_pb_include_posts" value="yes">
                      <input type="hidden" name="et_pb_include_pages" value="yes">
                      <input type="submit" value="Search" class="et_pb_searchsubmit" style="">
                  </div>
              </form>
          </div>
       <nav>
          <ul><strong>
             <li><a href="/index.php/robotlosningar">Robotlösningar</a></li>
             <li><a href="/index.php/made-by-andon">Made by Andon</a></li>
             <li><a href="/index.php/eftermarknad">Eftermarknad</a></li>
             <li><a href="/index.php/kontakt">Kontakt</a></li>
             <li><a href="/index.php/om-andon-robotics">Om Andon Robotics</a></li>
            </strong>
          </ul>
       </nav>        
    </div>
 </div>
</body>
Tags:

2

Answers


  1. 0

    This will because you are not transitioning the height when you are closing the div causing it to snap closed, as you are just transitioning the max-width this will cause the width the issue you are facing.

    Firstly i would add your transition to your div with the ID of menuID rather than the actual class you are adding on click. Play around with it but you need to transition the height as well as the width otherwise the height is just going to snap. Maybe look into doing your transitions something like this. The example im giving you isnt a 100% fix but it is going to point you in the direction you need to go in order to understand your issue

    transition:max-width 0.4s, height 0.4s;
    Login or Signup to reply.
  2. 0

    as @Stevo stated below this, that is mainly the problem. However, if you intend to animate the whole menu altogether as its expanding smoothly and consistently from one point of origin I’d suggest you either use transform:scale(); to animate its growth, or you translate the whole panel from top-left to bottom-right fading the content as it comes into the viewport.

    The problem with this:

    transition:max-width 0.4s, height 0.4s;

    Is that you are only stating the time or the animation to run but your width and height are different. Therefore it will not expand consistently.

    Also, do not try to make it expand synchronously by editing the time values because it is 1) a terrible approach, and 2) all works fine until you add something to the menu and the height changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search