レスポンシブサイトのメニューアニメーションいろいろ

2016/06/25

15_1
以前、CSS FlexBoxを使ってレスポンシブなナビメニューをつくってみました!という記事でドロップダウンアニメーションで表示されるメニューをつくりましたが、メニュー表示のアニメーションは他にもバリエーションがあります。
 
Webサイトを見ると必ずチェックしてしまう項目の一つでもあるので、いろいろなメニュー表示をアニメーション別にいくつかあつめてみました!

そのまま表示

 

KIRIN
gif
スライダーの上で横並びになっているメニューがウィンドウが狭まると、スライダーの下で縦並びの2列に変わります。メニューの変化と合わせて、スライダーナビの位置も下に移動して、新着情報の背景が塗りつぶしになって見やすくなっています。
 
 

foop
gif
最初は右上のバーアイコンをクリックすることでメニューがスライド表示されます。ウィンドウが狭まると予約注文などのボタンがメインビジュアルの下に表示されて、その下にメニューが横並びになっています。
 
 

Stephen Caver
gif
ロゴの横にメニュー項目の下に小さく簡単な説明が入っているメニューが表示されていて、ウィンドウを狭めていくとロゴがメニューの上に移動します。さらに狭めていくと小さいテキストが消えて立て並びに変わります。
 
 

ドロップダウン アニメーション

 

LEXUS
gif
横並びになっているメニューがウィンドウを狭めると右上にバーアイコンが表示されます。クリックすると上からメニューが降りてきます。
 
 

Louis Vuitton
gif
ウィンドウを狭めるとロゴとサーチ・ウィッシュリスト・カートのアイコンだけ残り、左上のバーアイコンをクリックするとドロップダウンして表示されます。メニューの一番下に電話番号が表示されているのは、すぐに電話をかけることができて便利ですね!
 
 

Samansa Mos2 blue
gif
バーアイコンをクリックするとSNSボタンとカートも含めてたメニューがドロップダウンで表示されます。メニューが表示されるのと同時にバーアイコンが回転して変化します。
 
 

フェード アニメーション

 

松坂牛 よし田
gif
アイコンをクリックすると背景がフェードインしてメニュー項目が少し遅れて上から順に表示されるようにアニメーションを重ねています。
 
 

Lovyu
gif
ウィンドウを狭めると左にあるSNSアイコンとTLRIAL!が消えてロゴが表示されます。バーアイコンをクリックするとバツマークにアイコンが変化しながらメニューが現れます。
 
 

SUN MOTOYAMA
gif
最初はウィンドウの中央にメニューが表示されており、ウィンドウを狭めると消えてメニューアイコンのクリックで表示されます。表示している項目の背景がハイライトになっています。
 
 

スライド アニメーション

 
TOMMY-GRAPHICS
gif
右側に横並びになっているメニューがウィンドウを狭めるとアイコンに変わり、クリックすると右からスライドでメニューが表示されます。
 
 

Corona-Extra
gif
こちらは最初からバーアイコンが表示されているタイプで、ウィンドウが狭まると通販のアイコンが消えます。バーアイコンをホバーするとスライドされる方向の矢印アイコンに変化するのがわかりやすいです。
 
 

LOCOMOTIVE
gif
ウィンドウを狭めるとメニューアイコンが現れて、縦向きのロゴが横向きになって中央に移動します。バーアイコンをクリックしたときのアニメーションも凝ってます!
 
 

ちょっと変わったもの

 

David Hellmann
gif
右上にテキストで表示されているメニューが、ウィンドウの下にアイコンつきで表示されるようになります。下に表示されるのはスマホだと押しやす位置で良いですね!
 
 

TOHOシネマズ
gif
メニューは最初からバーアイコンをクリックするとスライドアニメーションで表示されますが、ウィンドウを狭めると上映中・公開予定・劇場を探すがヘッダーと一体化して見やすくなります。
 
 

US Air Force
gif
こちらも最初からバーアイコンが表示されていて、クリックすると左から順にドロップダウンで表示されます。ウィンドウを狭めてアイコンをクリックすると、上から順にスライドで表示されれます。

レスポンシブサイトが増えるにつれてメニュー表示の方法もさまざまになってきています。アイコンの変化にもこだわっているサイトも多く、メニュー表示のアニメーションは遊び心を演出できる箇所のひとつになっていますね!

About

madka prof

WebLifeTimesはWebデザイナーのMadkaがWeb制作に関連したことや日々のちょっと気になったことなどを調べたり記録しているサイトです。TwitterFacebookで気になったニュース記事をシェアしたり独り言をつぶやいたりしています!

New Post

Recommend