表示するときの動きが美しいメガメニューを作ります。
実装のポイント
- 動きはCSSアニメーションのみ
- JS（jQuery）ではClass付与の制御のみ
最近はshow()とか使わなくてもいけるのでCSSで動きを入れるのが基本ですよね。でもshow()とか使いたいし使ったほうが楽なときは使おう。
HTML
トリガーとなるボタンと、表示するエリアを作る
HTML
<!-- ボタンになるやつ --><divclass="menu_toggle js-menu_toggle"><span>Click</span></div><!-- メガメニューになるやつ --><divclass="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:010px20pxrgba(#000,0.15);// CSSアニメーションの設定 transition:all0.3s;transform-origin:centertop;transform:scaleY(.96);opacity:0;visibility:hidden;ulli{margin-bottom:20px;}&.is-show{opacity:1;visibility:visible;transform:scaleY(1);}}jQuery
JSはClassの有無を判定してつけたり外したりするだけ。
jQuery
vartoggle=$(".js-menu_toggle");varelm=$(".js-menu_item");varactive="is-active";varshow="is-show";toggle.on('click',function(){varelm=$(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.
こういうニュアンスは意外と大事だと思うので
色とかフォントサイズも大事だけど、動きにも少し注目してみるとぐっと良いデザインになるかと思う。