ハンバーガーメニュープラグイン
ハンバーガーメニュープラグイン「hamburgers」
ハンバーガーメニューは自作でも作成できますが、簡単に導入できるプラグインも存在します。
ただ細かいカスタマイズなどは難しいので、サイトに導入する際は自作かプラグインかよく考えましょう。
「hamburgers」
この「hamburgers」プラグインは「cssプラグイン」という分類で、サイトにCSSをリンクすることで効果を発揮します。
アニメーションも付属のcssに記述されているので、簡単にメニューを実装できます。
ダウンロード方法
まずはプラグインをダウンロードしましょう。
サイトの「Usage」項目の「Download」からダウンロードページに飛びます。
最近はgithubに開発中データと共に完成版のデータをアップロードしてあるのが通常です。
githubの使い方も慣れておきましょう。
完成版は左の赤枠のところにMasterと書かれています。もしMasterでなかったらクリックしてMasterに切り替えましょう。
右の緑の部分からzipファイルをダウンロードします。
プラグインの導入方法
サイトの「Usage」項目に書いてありますので参考にしながら導入してみましょう。
- <link>タグで「hamburgers.css」をリンクします。
-
下記のタグをサイトにコピーします。
<div class="hamburger"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> -
アニメーションの種類を選択してclass名を追加します。
アニメーションのサンプルと追加するclass名はサイトに書かれているので、サイトからコピーしてください。<-- 追加例 --> <div class="hamburger hamburger--3dx"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div> -
jQueryなどを利用して、is-activeを追加するとアニメーションが始まります。
<-- 追加例 --> <div class="hamburger hamburger--3dx is-active"> <div class="hamburger-box"> <div class="hamburger-inner"></div> </div> </div>
