アニメーション付きのハンバーガーメニューを簡単に設置できるスタイルシート「Hamburgers」

アニメーション付きのハンバーガーメニューを簡単に設置できるスタイルシート「Hamburgers」

アニメーション付きのハンバーガーメニューを簡単に設置できるスタイルシート「Hamburgers」

Hamburgersは、クラスを付与するだけで、様々なアニメーションに対応したハンバーガーメニュを実装できるスタイルシートです。

挙動については、以下デモページにてご確認いただけます。

デモページを見る

Hamburgersの使い方

ステップ1. スタイルシートの設置と読み込み

GitHubからファイル一式をダウンロードします。ファイルを解答し、distフォルダ内のhamburgers.min.cssをサーバー上に設置します。

以下を<head>~<head>内に追加します。

<link href="dist/hamburgers.min.css" rel="stylesheet">

ステップ2. HTMLのマークアップ

HTMLは、以下のようにbutton要素かdiv要素で記述します。


<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

<div class="hamburger hamburger--3dx">
  <div class="hamburger-box">
    <div class="hamburger-inner"></div>
  </div>
</div>

全体を内包している.hamburgerクラスのところに、適用したいアニメーションのクラスを追加します。使用可能なクラスは以下の通りです。

  • hamburger–3dx
  • hamburger–3dx-r
  • hamburger–3dy
  • hamburger–3dy-r
  • hamburger–3dxy
  • hamburger–3dxy-r
  • hamburger–arrow
  • hamburger–arrow-r
  • hamburger–arrowalt
  • hamburger–arrowalt-r
  • hamburger–arrowturn
  • hamburger–arrowturn-r
  • hamburger–boring
  • hamburger–collapse
  • hamburger–collapse-r
  • hamburger–elastic
  • hamburger–elastic-r
  • hamburger–emphatic
  • hamburger–emphatic-r
  • hamburger–minus
  • hamburger–slider
  • hamburger–slider-r
  • hamburger–spin
  • hamburger–spin-r
  • hamburger–spring
  • hamburger–spring-r
  • hamburger–stand
  • hamburger–stand-r
  • hamburger–squeeze
  • hamburger–vortex
  • hamburger–vortex-r

ステップ3. ハンバーガー開閉時のクラス追加

.is-activeクラスが付いていると、ハンバーガーが閉じるボタンや矢印などに変化します。そのため、ハンバーガーメニューをクリック/タップした時に、.is-activeクラスを付与して開閉アニメーションが発動するようにスクリプトを追加します。

以下のようにjQueryで簡単に.is-activeクラスを追加したり削除したりすることができます。記述場所は、</body>の直前でOKです。すでにjQuery本体を読み込んでいる場合は、1行目は削除してください。


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.hamburger').click(function(){
  $(this).toggleClass('is-active');
  return false;
});
</script>

上記を追加することで、ハンバーガーをクリック/タップすると.is-activeクラスが追加され、もう一度クリック/タップすると.is-activeクラスが削除されます。

あとがき

色んなハンバーガーメニューを簡単に実装できて便利ですね。アニメーション付きのハンバーガーメニューを設置したい時は、ぜひご活用ください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です