Offcanvasでアクセシブルなスライド式ハンバーガーメニューを作ろう

無料 オフキャンバスプラグイン スライドナビゲーションのための多くのリソースの1つです。あなたはオンラインで似たようなプラグインの束を見つけることができますが、Offcanvasはいくつかの理由で際立っています.

それは かなり軽量のライブラリ そしてそれはjQuery上で動作しますが、それもまた セットアップはそれほど難しくありません. これは、JavaScriptコードとHTMLコードの両方に当てはまるので、デフォルトのナビゲーションを変更する必要はまったくありません。.

Offcanvasプラグインを使えば メニューを表示する特定の領域を指定します. デフォルトでは、これは通常画面の左側または右側ですが、画面の上部または下部を選択することもできます。.

これにより、Offcanvasは以下の目的に最適です。 もっと 単にハンバーガーのメニューをスライドさせるよりも。それはのために使用することができます スライド通知バー あるいは メールをキャプチャするためのオプトインフィールド.

各パネルは、ユーザーができるのと同じように機能します。 スライドメニューを非表示にするには、ページ上の任意の場所をクリックします. そして、次のことができます キーボードコマンドを設定する 適切なWebアクセシビリティのためのARIAガイドラインに準拠して動作するもの.

Offcanvasをインストールするために必要なのは jQueryのコピー 一緒に Offcanvas CSS / JSファイル. あなたはnpm、bower、またはGitHubから直接これらを引っ張ることができます.

GitHubページにもあります。 サンプルコードを見る あなたのウェブサイトに合うように作り直すことができます。スライド式ナビゲーションに必要なのは