【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;
}

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

Yuki Nakata

中田デザイン事務所 代表。
WEBデザイナー(フリー)/ WEB講師(非常勤)/ 海外販売(法人)他

お仕事のご相談はお問い合わせフォームへお願いします。