Accessible Dialog

JavaScript

ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

Accessible Dialogは、ナビゲーションメニューをモーダルダイアログで表示させるチュートリアルです。オーバーレイつきでとてもシンプルなモーダルダイアログを実装します。アクセシビリティに優れたナビゲーションメニューを取り入れたいときに、活用してみてはいかがでしょうか。

Accessible Dialog

デモ

右上に設置されたメニューボタンをクリックすると、オーバーレイとともに、画面中央にナビゲーションメニューが記述されたモーダルダイアログが表示されます。ダイアログ内の「×」ボタンをクリックすると、元の状態にもどります。もしくは、キーボードのESCボタンやモーダルダイアログ以外の場所のクリックでもダイアログを閉じることができます。

余計なアニメーションなどもなく、サクサク表示・非表示できるのでとても使い勝手がいいですね。画面全体にオーバーレイがかかるので、ナビゲーションメニューに視線を集中させやすいところもグッドです。

スッキリしたデザインのモーダルダイアログなので、シンプルなレイアウトのWebサイトなんかに合うかと思います。デザインだけでなく、マークアップなどもシンプルに記述できるようになっています。

Accessible Dialog

lightgallery.jsレスポンシブやタッチ対応などさまざまな機能を搭載したギャラリー実装「lightgallery.js」前のページ

モバイルに最適なスライドやフリップを実装できる「jQuery Page」次のページjQuery Page

関連記事

  1. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  2. jQuery Equal Height

    JavaScript

    異なる要素の高さを揃えてくれる「jQuery Equal Height」

    jQuery Equal Heightは、異なる要素の高さをキレイに揃…

  3. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  4. no-image

    JavaScript

    軽量・高速でレスポンシブ対応のjQueryスライダー「partialViewSlider」

    partialViewSliderは左右にスライドする軽量・高速でレス…

  5. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

  6. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6

アーカイブ

PAGE TOP