【CSSアニメーション】メガメニューとかに使えるちょっとした動きのあしらい

<!-- ボタンになるやつ -->
<div class="menu_toggle js-menu_toggle"> 
  <span>Click</span>
</div>

<!-- メガメニューになるやつ -->
<div class="menu_list js-menu_item">
  <ul>
    <li>テキスト</li>
    <li>アメリカ</li>
    <li>カナダ</li>
    <li>中国</li>
    <li>日本</li>
  </ul>
</div>

.menu_toggle{
  width: 300px;
  height: 50px;

  span{
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    background-color: yellow;
    padding-top: 12px;
    box-sizing: border-box;

    &:hover{
      background-color: #f90;
    }
  }
}

.menu_list{
  width: 100%;
  background-color: #efefef;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 20px rgba(#000, 0.15);

  // CSSアニメーションの設定   
  transition:all 0.3s;
  transform-origin: center top;
  transform: scaleY(.96);
  opacity: 0;
  visibility: hidden;

  ul li{
    margin-bottom: 20px;
  }

  &.is-show{
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);   
  }
}

var toggle = $(".js-menu_toggle");  
var elm = $(".js-menu_item");
var active = "is-active";
var show = "is-show";

toggle.on ( 'click' , function(){
  var elm = $(this).next(elm);

  if( $(this).hasClass(active)){
    $(this).removeClass(active);
    elm.removeClass(show);
  }else{
    $(this).addClass(active);
    elm.addClass(show);
  }
});