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

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


## 実装のポイント

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

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

## HTML

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

```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: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の有無を判定してつけたり外したりするだけ。

```javascript: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);
  }
});
```

## 完成版

こちらが完成版となります。
<p class="codepen" data-height="335" data-theme-id="light" data-default-tab="css,result" data-user="nagomi-753" data-slug-hash="RwaNvQv" style="height: 335px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="メガメニュー小技版">
  <span>See the Pen <a href="https://codepen.io/nagomi-753/pen/RwaNvQv">
  メガメニュー小技版</a> by nagomi-753 (<a href="https://codepen.io/nagomi-753">@nagomi-753</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


ちなみに、`scaleY()`を使わない場合はこんなかんじです。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="nagomi-753" data-slug-hash="abNzXeK" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="メガメニュー小技効いてない版">
  <span>See the Pen <a href="https://codepen.io/nagomi-753/pen/abNzXeK">
  メガメニュー小技効いてない版</a> by nagomi-753 (<a href="https://codepen.io/nagomi-753">@nagomi-753</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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