ハンバーガーメニューを簡単に実装できる、プレーンなHTML/CSSとReactコンポーネント -Animated Burgers

プレーンなHTMLとCSS、またはReactコンポーネントとして利用可能なハンバーガーメニューを紹介します。

コピペで簡単に利用でき、サイズやカラーのカスタマイズも簡単です。ハンバーガーメニューのアニメーションもさまざまなものが揃っています。

サイトのキャプチャ

Animated Burger Components
Animated Burgers Components -GitHub

Animated Burgers Componentsのデモ

デモページでは、アニメーションで動くハンバーガーメニューを楽しめます。

サイトのキャプチャ

Animated Burger Components

スクィーズ、スライド、スリップ、ロテイトなど、さまざまなアニメーションが簡単に利用できます。

Animated Burgers Componentsの使い方: HTML/CSS<

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。
CSSファイルはそれぞれのアニメーションで、個別ファイルになっています。

Step 2: HTML

HTMLはシンプルです。
アローに変化するハンバーガーメニューのコードは、下記のようになります。

開いた状態にするには、.openを与えるだけです。

矢印など、アニメーションで方向が必要な場合も、classを加えるだけです。

Animated Burgers Componentsの使い方: React

ハンバーガーの各スタイルは個別にnpmパッケージとして公開されています。必要なものだけをインポートして利用できます。

Step 1: プロジェクトにインクルード

npm経由でパッケージをインストールします。

Step 2: コード

ハンバーガーメニューを利用するには、下記のように記述します。

Animated Burgers Componentsのカスタマイズ

ハンバーガーメニューのスタイルは、classを上書きするか、加えることで簡単にカスタマイズできます。SCSSファイルも用意されています。

ハンバーガーメニューのカラーを変更するには、下記のコードを加えます。

サイズはfont-sizeに基づいて拡大縮小します。ラインはem値で、ベースラインは12pxです。

sponsors

top of page

©2024 coliss