[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法

ナビゲーションの現在表示しているページのリンクを無効にするスタイルシートを紹介します。

デモのキャプチャ

Pointer Events & Disabling Current Page Links
デモページ

デモは「About」ページに「About」のリンクが無効で他は通常通りに機能するナビゲーションが設置されています。

このようなテクニックはJavaScriptを使用したり、 CSSの場合はclassを追加したりするものですが、ここではナビゲーション箇所もスタイルシートも全ページ共通で利用できるものとなっています。

現在位置のリンクを無効にする方法

使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。

HTML

ナビゲーションはシンプルなHTMLです。

次にbodyにidを与えます。
※元記事では「home」ですが、デモと同じ「about」にしています。

CSS

エレメントに対するマウスイベントをコントロールする「pointer-events」を利用します。初期値は「auto」です。
参考:pointer-events - MDC
※元記事では「home」ですが、デモと同じ「about」にしています。

これにより、idに「about」を持ったページだけナビゲーションの「about」のリンクが無効になります。

また、元記事には多数のコメントがついており、他にもさまざまな方法が考察されています。

sponsors

top of page

©2024 coliss