Accessible Dialog

JavaScript

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

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

Accessible Dialog

デモ

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

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

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

Accessible Dialog

関連記事

  1. Drift

    JavaScript

    画像にホバーして拡大できる軽量のスクリプト「Drift」

    Driftは画像にホバーした部分を拡大できるシンプルで軽量なスクリプト…

  2. Yamm 3

    JavaScript

    メガメニューをBootstrap3で実装する「Yamm 3」

    Yamm 3はメガメニューをBootstrap3を使って実装することが…

  3. Basic Metro Dynamic jQuery Tab Menu
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  5. Image Tilt Effect

    JavaScript

    画像にチルトエフェクトをかけることができる「Image Tilt Effect」

    Image Tilt Effectは画像にチルトエフェクトをかけたちょ…

  6. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP