CSSのみでフキダシ風のタブナビゲーションを実装する

このような見た目のタブを画像を使わずCSSのみで実装します。
しっぽの位置はCSSの変更のみで上下左右変更可能です。

HTML

ソースはいたって普通のリストタグを使ったナビゲーションです。

<ul class="nav">  	<li class="nav-item nav-item-current"><a href="#">item 1</a></li>  	<li class="nav-item"><a href="#">item 2</a></li>  	<li class="nav-item"><a href="#">item 3</a></li>  	<li class="nav-item"><a href="#">item 4</a></li>  	<li class="nav-item"><a href="#">item 5</a></li>  </ul>

jQuery

Javascriptを使ってナビゲーションの各アイテムにspanタグを追加します。
スクリプトを使わなくてもいいのですが、Javascriptオンの環境ではタブナビゲーションでコンテンツを切り替え、オフの環境ではただのアンカータグでコンテンツが全て見えている、という動作を想定しているため、フキダシのしっぽ部分を後から追加するようにしています。

$('.nav-item a').append(  '<span class="tail-left"><br /></span>'  +'<span class="tail-right"><br /></span>'  );

CSS

追加したspanにボーダーをつけて、ボーダーの角を２つ合わせることでフキダシのしっぽ風にしています。

.nav .nav-item {  	display: inline;  	list-style: none;  }  .nav .nav-item a {  	float: left;  	margin-right: 5px;  	position: relative;  	width: 80px;  	text-align: center;  }  .nav .nav-item a:link,  .nav .nav-item a:visited {  	background: #ffffff;  	color: #333333;  	border: 1px solid #dddddd;  	padding: 0 10px;  	line-height: 35px;  	text-decoration: none;  }  .nav .nav-item a:hover,  .nav .nav-item a:active,  .nav .nav-item-current a:link,  .nav .nav-item-current a:visited {  	background: #162b7c;  	color: #ffffff;  	border: 1px solid #162b7c;  	padding: 0 10px;  	line-height: 35px;  	text-decoration: none;  }  .nav .nav-item a span {  	position: absolute;  	width: 5px;  	height: 5px;  	top: 30px;  }  .nav .nav-item a:link span.tail-left,  .nav .nav-item a:visited span.tail-left,  .nav .nav-item a:link span.tail-right,  .nav .nav-item a:visited span.tail-right {  	display: none;  }  .nav .nav-item a:hover span.tail-left,  .nav .nav-item a:active span.tail-left,  .nav .nav-item-current a:link span.tail-left,  .nav .nav-item-current a:visited span.tail-left {  	border-right: 5px solid #162b7c;  	border-bottom: 5px solid transparent;  	right: 50%;  	display: block;  }  .nav .nav-item a:hover span.tail-right,  .nav .nav-item a:active span.tail-right,  .nav .nav-item-current a:link span.tail-right,  .nav .nav-item-current a:visited span.tail-right {  	border-left: 5px solid #162b7c;  	border-bottom: 5px solid transparent;  	left: 50%;  	display: block;  }

demo

動作環境： 7+

こちらの記事を参考にしました。求めている形が違ったので改造しましたが、ここまで書いてからspanは１つだけでも実装できることを発見してしまった。まぁいいや。

---