2024.05.06
OSS
モバイルフレンドリーなイメージビューワー SmartPhoto.js の利用方法
hiraku.js - オフキャンバスメニュー用 jQuery プラグイン をリリースしました
この hiraku.js は、弊社で開発している a-blog cms の中で利用するために作られた「オフキャンバスメニュー用のJavaScript」を、より多くの人に利用してもらえるように jQuery のプラグイン化したものです。
オフキャンバスメニューとは画面左右から出現するメニューのことで、ドロワーメニューとも呼ばれたりします。
オフキャンバスメニュー用の JavaScript は Google で「offcanvas JavaScript」のように検索すると多く見つけることができますが、今回 hiraku.js で実装した特徴を全て満たすものを探す事ができなかった事から自作する事になりました。
appleple.github.io/hiraku では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説を書いてみようと思います。
特徴
- 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,オフキャンバスメニューを開閉するためのボタンのセレクターを指定
#fixedHeader,position:fixedを指定した要素でオフキャンバスメニュー開閉時にメインコンテンツに合わせてスライドさせたいコンテンツがあればそのセレクターを指定
#direction,オフキャンバスメニューを開閉する方向を指定（right or left）
デモ
右に開閉
左に開閉
左右に開閉
hiraku.css のカスタマイズ
オフキャンバスメニュー開閉時に Body 自体は固定する
標準の仕様では、オフキャンバスメニューが横から出てくる事で元々のコンテンツは横に押し出される動きをしますが、元のコンテンツの上に重なるような表示にしたい場合には、下記のような CSS で hiraku.css を上書きしてください。
開閉時のオフキャンバスメニューの幅を px 指定する
標準の仕様では、CSSでオフキャンバスメニューは 70% になっていますが、タブレットの時にはメニューが大きくなり % 指定ではなく px 指定したい場合も出てくると思われます。その際には、下記のようなCSSで hiraku.css を上書きしてください。
hiraku.scss のカスタマイズ
SCSSを使ってオフキャンバスメニューの幅を変更
また、hiraku.scss の変数を変更することでオフキャンバスメニューの幅を固定にしたり、アニメーションの速度について変更した css を生成可能です。
#$side-menu-width,オフキャンバスメニューの幅を指定, 標準： 70%
#$animation, アニメーションの速度とトラ種類を指定 , 標準：0.3s ease-in-out
ダウンロード
ダウンロードはこちらから行えます。
リンク
appleple.github.io/hiraku
github.com/appleple/hiraku
