豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」

Ember Burger Menu

Ember Burger Menuは、豊富なアニメーションを有するカスタマイズ性に優れたハンバーガーメニューを実装することができます。off-canvas サイドバーコンポーネントで、CSS transitionを使用したアニメーションとスタイルが特徴です。

Ember Burger Menu

デモ

デモでは画面左上にハンバーガーアイコンが表示されていて、これをクリックすると横からスライドでメニューが表示されます。

アニメーション、アイテムアニメーション、オプションにはいろいろな種類が用意されているので、自分の気になるものを選択して動作をチェックできます。特にアニメーションの種類はかなり豊富で、具体的には以下の種類から選べるようになっています。

  • slide
  • reveal
  • push
  • fall-down
  • open-door
  • push-rotate
  • rotate-out
  • scale-up
  • scale-down
  • scale-rotate
  • slide-reverse
  • slide-shrink

アイテムアニメーションも、None、Push、Stackの中から選ぶことが可能です。

また、ハンバーガーメニューを表示させるポジションもオプションから左か右の好きな方に設定できます。オプションには他にもいろいろ種類があるので、気になる人はぜひチェックしてみてください。

というわけで、多彩なアニメーションやスタイルをカスタマイズできるハンバーガーメニュー「Ember Burger Menu」のご紹介でした。

Ember Burger Menu

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives