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. CSSで背景画像をアニメーションさせる

    CSS

    CSSを使ってテキストに背景画像を設定して背景をアニメーションさせるやり方

    ちょっと個人的にいいなって思ったTipsがあったのでご紹介します。CS…

  2. Epic Spinners

    CSS

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

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

  3. CSS

    CSSを使ったエフェクトつきボタンを探せる「CSS Buttons」

    CSSでエフェクトがついたボタンを作りたいときに役立つ「CSS But…

  4. CSSでborderにグラデーションをかけたようにする

    CSS

    CSSでborderにグラデーションをかけたようにするやり方

    CSSでborderにグラデーションを直接かけたいんですが、なんかでき…

  5. CSSで上下の要素を入れ替えて配置させるやり方

    CSS

    CSSのレイアウトで上下の要素を入れ替えて逆に配置させるやり方

    CSSでレイアウトを組む時に、上下に二つ並んでいる要素を入れ替えて逆に…

  6. CSS

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

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

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP