[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」のリンクが無効になります。

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

top of page

Trackback

Comments

スタイルシートを使用して現在位置のリンクを無効にする方法を自分のブログに適用してみる - Asazukiの覚書 – PC

on 2010年6月2日

[...] [CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリスを参考にして、自分のブログにも適用してみました。 [...]

links for 2010-06-02 « 個人的な雑記

on 2010年6月3日

[...] [CSS]スタイルシートを使用して現在位置のリンクを無効にする方法 | コリス (tags: css) [...]

freewebdev.jp

on 2010年6月6日

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

「Pointer Events & Disabling Current Page Links」
ナビゲーションの現在表示しているページのリンクを無効にするスタイルシートを紹介します。

デモは「About」ページに「About」のリンクが無効で…

top of page

©2014 coliss