ブログ - JavaScript


この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。

オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。

オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。

appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。

  1. 特徴
  2. 使い方
  3. hiraku.css のカスタマイズ
  4. hiraku.scss のカスタマイズ
  5. ダウンロード

 

特徴

  • HTMLの構造に左右されない
  • 両サイドのオフキャンバスメニューが可能
  • オフキャンバスメニューのスクロール時にメインのコンテンツはスクロールされない
  • 固定されたコンテンツ(固定ヘッダーなど)もメインコンテンツのスライド量に応じてスライド
  • CSSでオフキャンバスメニューの挙動を制御可能
  • キーボードナビゲーションとスクリーンリーダーに対するアクセシビリティ対応

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" type="text/css" href="./hiraku.css">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="./hiraku.js"></script>

オプション

hiraku.js では以下のようなオプションが用意されており、オフキャンバスメニュー開閉時の挙動を制御可能です。また、開いてくるメニューの幅などについては、スマートフォンとタブレットで挙動を変更できるように CSS 側での指定にしています。

btnオフキャンバスメニューを開閉するためのボタンのセレクターを指定
fixedHeaderposition:fixedを指定した要素でオフキャンバスメニュー開閉時にメインコンテンツに合わせてスライドさせたいコンテンツがあればそのセレクターを指定
directionオフキャンバスメニューを開閉する方向を指定(right or left)

デモ

右に開閉

See the Pen MjNEyv by appleple (@appleple) on CodePen.

左に開閉

See the Pen yamzpp by appleple (@appleple) on CodePen.

左右に開閉

See the Pen VKoMGw by appleple (@appleple) on CodePen.


hiraku.css のカスタマイズ


オフキャンバスメニュー開閉時に Body 自体は固定する

標準の仕様では、オフキャンバスメニューが横から出てくる事で元々のコンテンツは横に押し出される動きをしますが、元のコンテンツの上に重なるような表示にしたい場合には、下記のような CSS で hiraku.css を上書きしてください。

See the Pen KgOYMO by appleple (@appleple) on CodePen.


開閉時のオフキャンバスメニューの幅を px 指定する


標準の仕様では、CSSでオフキャンバスメニューは 70% になっていますが、タブレットの時にはメニューが大きくなり % 指定ではなく px 指定したい場合も出てくると思われます。その際には、下記のようなCSSで hiraku.css を上書きしてください。

See the Pen amexBp by appleple (@appleple) on CodePen.

hiraku.scss のカスタマイズ

SCSSを使ってオフキャンバスメニューの幅を変更

また、hiraku.scss の変数を変更することでオフキャンバスメニューの幅を固定にしたり、アニメーションの速度について変更した css を生成可能です。

$side-menu-widthオフキャンバスメニューの幅を指定標準: 70%
$animationアニメーションの速度とトラ種類を指定標準:0.3s ease-in-out

ダウンロード

ダウンロードはこちらから行えます。

hiraku.js をダウンロード

リンク

appleple.github.io/hiraku


github.com/appleple/hiraku



お電話でのお問い合せはこちら(10時〜19時)

052-485-8577