クールなグローバルナビゲーションその2

0_readme.md

• 置換するスプリット画像を１つ用意
• 画像にはデフォルトとアクティブ時の２つの状態を作成
• マウスオーバーでの効果はcssで作成する
  • 下部にborderをアニメーション表示
  • 画像のデフォルトとアクティブの間には隙間を用意（10px）

1_.scss

.l-gnav {
	$img: "/common/img/im_gnav.png";  // 読み込む画像のパス
	$itemHeight: 48px;  // 置換するスプリット画像のY座標
	$itemWidth: 167px;  // 置換するスプリット画像のx座標
	$homeWidth: 165px;  // homeは少し細い
	$defaultPos: 0;
	$activePos: - $itemHeight;
	margin-bottom: 20px; // 余白分を引いている（見た目上は30px）
	// common
	li {
		float: left;
	}
	a {
		display: block;
		overflow: hidden;
		height: 0;
		padding-top: $itemHeight;
		background-image: url($img);
		background-repeat: no-repeat;
		position: relative;
		&:after {
			background-color: $g_main-color;
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			height: 2px;
			transition: all .3s;
			width: 0;
			z-index: 10;
		}
		&:hover::after {
			left: 0;
			width: 100%;
		}
	}
	// a element
	@mixin set-bg-img($left: 0, $width: $itemWidth) {
		background-position: $left $defaultPos;
		width: $width;
		&.is-active {
			background-position: $left $activePos;
		}
	}
	&__home {
		@include set-bg-img($width: $homeWidth);
	}
	&__company {
		$l: -$homeWidth;
		@include set-bg-img($left: $l);
	}
	&__feature {
		$l: -($homeWidth + $itemWidth);
		@include set-bg-img($left: $l);
	}
	&__service {
		$l: -($homeWidth + $itemWidth * 2);
		@include set-bg-img($left: $l);
	}
	&__customer {
		$l: -($homeWidth + $itemWidth * 3);
		@include set-bg-img($left: $l);
	}
	&__recruit {
		$l: -($homeWidth + $itemWidth * 4);
		@include set-bg-img($left: $l);
	}
}
.l-gnav__wrap {
	@include clearfix;
	margin: 0 auto;
	padding: 0;
	width: $g_width-pc;
}

2_.html

<nav class="l-gnav" role="navigation">
  <ul class="l-gnav__wrap">
    <li><a href="/" class="l-gnav__home is-active"></a></li>
    <li><a href="/company/" class="l-gnav__company"></a></li>
    <li><a href="/feature/" class="l-gnav__feature"></a></li>
    <li><a href="/service/" class="l-gnav__service"></a></li>
    <li><a href="/customer/" class="l-gnav__customer"></a></li>
    <li><a href="/recruit/" class="l-gnav__recruit"></a></li>
  </ul>
</nav>

3_.css

.l-gnav {
	margin-bottom: 20px;
}
.l-gnav li {
	float: left;
}
.l-gnav a {
	position: relative;
	display: block;
	overflow: hidden;
	height: 0;
	padding-top: 48px;
	background-image: url('/common/img/im_gnav.png');
}
.l-gnav a:after {
	position: absolute;
	z-index: 10;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 2px;
	content: '';
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	background-color: #006cb8;
}
.l-gnav a:hover::after {
	left: 0;
	width: 100%;
}
.l-gnav__home {
	width: 165px;
	background-position: 0 0;
}
.l-gnav__home.is-active {
	background-position: 0 -48px;
}
.l-gnav__company {
	width: 167px;
	background-position: -165px 0;
}
.l-gnav__company.is-active {
	background-position: -165px -48px;
}
.l-gnav__feature {
	width: 167px;
	background-position: -332px 0;
}
.l-gnav__feature.is-active {
	background-position: -332px -48px;
}
.l-gnav__service {
	width: 167px;
	background-position: -499px 0;
}
.l-gnav__service.is-active {
	background-position: -499px -48px;
}
.l-gnav__customer {
	width: 167px;
	background-position: -666px 0;
}
.l-gnav__customer.is-active {
	background-position: -666px -48px;
}
.l-gnav__recruit {
	width: 167px;
	background-position: -833px 0;
}
.l-gnav__recruit.is-active {
	background-position: -833px -48px;
}

.l-gnav__wrap {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
}
.l-gnav__wrap::after {
	display: table;
	clear: both;
	content: '';
}