【CSS】ナビゲーションボタンの現在のページに装飾をし、クリック不可にする

先程の記事「【CSS】クリック領域を広げたナビゲーションボタンを作る」のhtmlを利用して、「ナビゲーションボタンの現在のページにのボタンに装飾をし、クリック不可にする」というのを作成しています。下のHTML、CSSが前回と同じものです。

HTML

<nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">当社について</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav>

CSS

.content-nav li{ margin-right:1px; width:100%; text-align: center; } .content-nav li:last-child{ margin-right:0; }   .content-nav li a{ display:block; padding:10px; background-color:#ffcccc; }   .content-nav li a:hover{ color:#fff; background-color:#ff6666; }

クラス「current」を追加

ここに新たに、クラス「current」を作成します。「current」という名称は、clearfixと同じように、一般的に利用されているクラス名称で、「現在のページ」を意味する加工をする時によく利用します。

また、html上にも、aタグにクラスcurrentを追加します。

HTML

<nav> <ul> <li><a href="#" class="current">ホーム</a></li> <li><a href="#">当社について</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">アクセス</a></li> </ul> </nav>

CSS

.current{   }

擬似クラスを追加

今回はクラス「current」が指定してあるボタンに下線を設置します。

クラス「current」にposition:relativeにして、擬似クラスafterを追加します。その疑似クラスの位置をbottom:0にすれば、ボタンの下部に下線を引くことができます。

CSS

.current { position: relative; }   .current::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; border-bottom: 4px solid #ff9999; }

イベントを無効にする

ただこのままだと現在見ているページのボタンをクリックできてしまう状況なので、クラス「current」に、イベントを無効にするプロパティをいれます。イベントを無効にするので、ホバーもされませんしクリックもできなくなります。

CSS

.current { pointer-events: none; position: relative; }   .current::after { position: absolute; bottom: 0; left: 0; content: ''; width: 100%; border-bottom: 4px solid #ff9999; }

ホームをクリックしてみてください。ホバーもクリックもできない状態になっています。