洒落たエフェクトのメニューバーを作ってみた。

今回は、下のようなホバーするとアンダーラインが気持ちよく現れるメニューを作ってみました。
下のメニュの上にカーソルを載せてみてください。

疑似要素、:beforeの初期位置を、liの真ん中、すなわちleft:50%に指定し、hover前の幅を0にしておくことで、transitionにより、真ん中から、にゅっとアンダーラインが出現しているように見えます。
実際のコードは下になります。
transitionは応用しがいがありそうですね。
みなさんもぜひお試し下さい。

CSS

.sample_header li{
	display: inline-block;
	padding: 15px;
	list-style-type: none;
	position: relative;
}
.sample_header li:after{
	content: "";
	position: absolute;	
	height: 4px;
	background-color: #008CBA;
	bottom:-2px;
	width: 0;
	left: 50%;
	-webkit-transition: all ease-out 0.2s;
	   -moz-transition: all ease-out 0.2s;
	    -ms-transition: all ease-out 0.2s;
	     -o-transition: all ease-out 0.2s;
	        transition: all ease-out 0.2s;
}
.sample_header li:hover:after{
	left: 0;
	width: 100%;
}

HTML

<ul class="sample_header">
	<li><a href="#">項目1</a></li>
	<li><a href="#">項目2</a></li>
	<li><a href="#">項目3</a></li>
	<li><a href="#">項目4</a></li>
</ul>

Home
Next entry →