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

表示するときの動きが美しいメガメニューを作ります。

実装のポイント

• 動きはCSSアニメーションのみ
• JS（jQuery）ではClass付与の制御のみ

最近はshow()とか使わなくてもいけるのでCSSで動きを入れるのが基本ですよね。でもshow()とか使いたいし使ったほうが楽なときは使おう。

HTML

トリガーとなるボタンと、表示するエリアを作る

HTML

<!-- ボタンになるやつ -->
<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>

SCSS

CSSでフェードインさせたい時はdisplay:none;じゃなくてvisibility: hiddenで要素を隠す。
ただフェードイン/アウトだけだと味気ないデザインになってしまうので、transform: scaleY();を利用して少しニュアンスを与えてあげましょう。これで見たときの印象がぐっと変わる

SCSS

.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);   
  }
}

jQuery

JSはClassの有無を判定してつけたり外したりするだけ。

jQuery

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);
  }
});

完成版

こちらが完成版となります。

See the Pen メガメニュー小技版 by nagomi-753 (@nagomi-753) on CodePen.

ちなみに、scaleY()を使わない場合はこんなかんじです。

See the Pen メガメニュー小技効いてない版 by nagomi-753 (@nagomi-753) on CodePen.

こういうニュアンスは意外と大事だと思うので
色とかフォントサイズも大事だけど、動きにも少し注目してみるとぐっと良いデザインになるかと思う。