Accessible Dialog

JavaScript

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

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

Accessible Dialog

デモ

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

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

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

Accessible Dialog

関連記事

  1. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. jquery-time-slider

    JavaScript

    時間と日付を選択できる「jquery-time-slider」

    jquery-time-sliderは時間と日付を選択できるjQuer…

  3. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  4. Responsive Multi Menu
  5. JavaScript

    中心から外側に広がっていくエフェクトのjQueryプラグイン「jQuery.twinkle」

    jQuery.twinkleというjQueryプラグインを使えば、中心…

  6. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP