Ember Burger Menu

CSS

豊富なアニメーションを有するハンバーガーメニュー「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

関連記事

  1. Epic Spinners

    CSS

    CSSによる素敵なスピナーコレクション「Epic Spinners」

    Epic SpinnersはCSSで作成された素敵なスピナーコレクショ…

  2. CSS

    ulのリストを横並びにしてtext-alignを適用させる方法

    ちょっと悩んじゃいました。ulのli要素を横並びにしてそれにtext-…

  3. 動画をレスポンシブにするCSS

    CSS

    動画をレスポンシブに対応させるCSSのTipsがとても便利

    以前、YouTubeやVimeoからの埋め込み動画をレスポンシブにする…

  4. Light Modal

    CSS

    パワフルでカスタマイズ性に優れたCSSモーダル「Light Modal」

    Light Modalは、軽量・パワフルでカスタマイズ性に優れたCSS…

  5. CSS

    CSSの:beforeと:afterを使ってちょっとした装飾をつけてみる

    CSSの:beforeと:afterを使ってちょっとした装飾をつけるこ…

  6. CSS

    CSSを使って画像にホバーするとキャプションを表示させるエフェクト

    CSSを使ったホバーエフェクトがとてもよかったのでご紹介します。画像に…

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP