Ember Burger Menuは、豊富なアニメーションを有するカスタマイズ性に優れたハンバーガーメニューを実装することができます。off-canvas サイドバーコンポーネントで、CSS transitionを使用したアニメーションとスタイルが特徴です。
Ember Burger Menu
以下のページから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の詳しい使い方やダウンロードは、以下のページからどうぞ。
