[CSS]スタイルシートを使用して現在位置のリンクを無効にする方法
Post on:2010年6月2日
sponsors
ナビゲーションの現在表示しているページのリンクを無効にするスタイルシートを紹介します。
Pointer Events & Disabling Current Page Links
デモページ
デモは「About」ページに「About」のリンクが無効で他は通常通りに機能するナビゲーションが設置されています。
このようなテクニックはJavaScriptを使用したり、 CSSの場合はclassを追加したりするものですが、ここではナビゲーション箇所もスタイルシートも全ページ共通で利用できるものとなっています。
現在位置のリンクを無効にする方法
使用するのはCSS3の「pointer-events」で、対応ブラウザはFx3.6+, Safari3+, Chrome(5+?)となっており、IEでは未対応です。
HTML
ナビゲーションはシンプルなHTMLです。
|
1 2 3 4 5 6 7 8 9 10 |
<textarea name="code" class="html" cols="60" rows="5"> <nav> <ul> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="clients"><a href="#">Clients</a></li> <li class="contact"><a href="#">Contact Us</a></li> </ul> </nav> </textarea> |
次にbodyにidを与えます。
※元記事では「home」ですが、デモと同じ「about」にしています。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <body id="about"> </textarea> |
CSS
エレメントに対するマウスイベントをコントロールする「pointer-events」を利用します。初期値は「auto」です。
参考：pointer-events - MDC
※元記事では「home」ですが、デモと同じ「about」にしています。
|
1 2 3 4 5 6 |
<textarea name="code" class="html" cols="60" rows="5"> #about nav .about > a { pointer-events: none; cursor: default; } </textarea> |
これにより、idに「about」を持ったページだけナビゲーションの「about」のリンクが無効になります。
また、元記事には多数のコメントがついており、他にもさまざまな方法が考察されています。
sponsors
