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

Vertical Timeline垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline」前のページ

Googleスプレッドシートからデータをインポートできる「GoogleSheets-HTMLImporter」次のページGoogleSheets-HTMLImporter

関連記事

  1. Light Modal

    CSS

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

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

  2. li要素の折り返したテキストを揃える

    CSS

    li要素のテキストを折り返した時に頭文字の余白を揃えるやり方

    またどこかで使いそうな感じがしたので記録として残しておきます。ulのl…

  3. CSSでテキストを縦にするやり方

    CSS

    CSSでテキストを縦の位置にするやり方

    ちょっと便利そうだったのでメモがてらご紹介。CSSでテキストを縦の位置…

  4. Alerts.css

    CSS

    シンプルでピュアなCSSによるアラート実装「Alerts.css」

    Alerts.cssはシンプルでピュアなCSSを使ったアラートを実装で…

  5. CSS3を使ったツールチップ

    CSS

    CSS3を使ってアニメーションするツールチップを実装するコード

    これすごくよかったのでメモがてらエントリー。CSS3を使ってアニメーシ…

  6. CSS

    よく見かけるblockquoteの左上と右下にダブルクォートつけるやつをCSSだけで作ってみる

    blockquoteのデザインって色んなパターンがあって面白いですよね…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP