PC・スマートフォン共通で使えるメニュー「hamburgler」

すっきりとしたエフェクトで、表示・非表示を切り替えるメニュー「hamburgler.js」。

PCとスマートフォンで同じデザインを使えて、しかも軽量。


まずは動作はこんな感じ。
Demo & Download

左上のメニューアイコンをクリック（スマホ、タブレットはタップ）すると、メニュー画面が展開されます。

Step1

jQueryを読み込みます。 GoogleのCDNの場合は

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

jQueryのCDNの場合は

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

Step2

jsファイルとcssファイルをhead内で読み込みます。

<script src="hamburgler.js"></script>
<link rel="stylesheet" href="hamburgler.css">

Step3

body内に次のコードを記述します。

<div class="mobilenav">
    <li><a href="#">Menu Name 01</a></li>
    <li><a href="#">Menu Name 02</a></li>
    <li><a href="#">Menu Name 03</a></li>
    <li><a href="#">Menu Name 04</a></li>
    <li><a href="#">Menu Name 05</a></li>
</div>

<a href="javascript:void(0)" class="icon">
    <div class="hamburger">
        <div class="menui top-menu"></div>
        <div class="menui mid-menu"></div>
        <div class="menui bottom-menu"></div>
    </div>
</a>

あとはお好みでCSSを変更して、色や位置を変更できます。

また、メニュー開閉スピードはjs内の.fadeToggle(500);の数値を変更します。

動作サンプルとソースコードのダウンロードはこちらから
Demo & Download

Written by Creative Flake