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

サイト構築 -制作

Post on:2019年2月6日

Animated Burgers Componentsのデモ

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

Animated Burger Components

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

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

Step 1: 外部ファイル

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

<link href="./packages/__YourBurgerStyle__/dist/styles.css" rel="stylesheet">

1	<link href="./packages/__YourBurgerStyle__/dist/styles.css" rel="stylesheet">

Step 2: HTML

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

<div class="burger burger-arrow">
  <div class="burger-lines"></div>
</div>

</div>

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

<div class="burger burger-arrow open">
  <div class="burger-lines"></div>
</div>

</div>

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

<div class="burger burger-arrow burger-right">
  <div class="burger-lines"></div>
</div>

</div>

Animated Burgers Componentsの使い方: React

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

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

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

npm install --save @animated-burgers/{burger-style} classnames
// or using yarn
yarn add @animated-burgers/{burger-style} classnames

npm install --save @animated-burgers/{burger-style} classnames

// or using yarn

yarn add @animated-burgers/{burger-style} classnames

Step 2: コード

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

// React Component
import Burger from '@animated-burgers/{burger-style}' 
// don't forget the styles
import '@animated-burgers/{burger-style}/dist/styles.css' 

...

// default state, other props are passed down to the wrapping element
<Burger {...props}/>

// open state
<Burger isOpen={ true } />

// some burgers, such as arrow, supports direction
// (left - default, up, right, down)
<Burger direction="right" />


// By default, div will be rendered as a wrapping element
// You can pass a different wrapping component
<Burger Component="button" type="button" />

// results in
<button class="burger" type="button>
  <div class="burger-lines">
</button>

// React Component

import Burger from '@animated-burgers/{burger-style}'

// don't forget the styles

import '@animated-burgers/{burger-style}/dist/styles.css'

...

// default state, other props are passed down to the wrapping element

// open state

// some burgers, such as arrow, supports direction

// (left - default, up, right, down)

// By default, div will be rendered as a wrapping element

// You can pass a different wrapping component

// results in

</button>

Animated Burgers Componentsのカスタマイズ

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

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

.burger .burger-lines,
.burger .burger-lines:after,
.burger .burger-lines:before { background-color: red; }

.burger .burger-lines,

.burger .burger-lines:after,

.burger .burger-lines:before { background-color: red; }

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

<!-- smaller -->
<div class="burger burger-squeeze" style="font-size: 8px">
  <div class="burger-lines"></div>
</div>

<!-- default -->
<div class="burger burger-squeeze">
  <div class="burger-lines"></div>
</div>


<!-- larger -->
<div class="burger burger-squeeze" style="font-size: 18px">
  <div class="burger-lines"></div>
</div>