Accessible Dialog

JavaScript

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

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

Accessible Dialog

デモ

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

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

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

Accessible Dialog

関連記事

  1. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  2. GRT Responsive Menu
  3. Stretchy

    JavaScript

    入力した文字数に合わせて可変するフォーム実装「Stretchy」

    Stretchyは入力した文字数に合わせてボックスが伸び縮みするフォー…

  4. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  5. Kerning.js

    JavaScript

    文字間のカーニングや一部の色を変えたりできるjQueryプラグイン「Kerning.js」

    文字間のカーニングや一部の文字の色を変えたりできるjQueryプラグイ…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP