data属性を利用したナビゲーションの実装サンプル

Posted on January 23th, 2016
Category : Tips

タイトル通り、テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。いずれもカスタマイズといっても簡易的なものばかりで、ほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。また、あまりdata属性を使ったことがないという人はこういう使い方もあるということで参考にしてみてください :)

補足テキストを表示 #1

See the Pen ZQrKdQ by Naoya (@nxworld) on CodePen.

見かけることが多いと思う、ナビゲーションに日本語と英語を一緒に表示させて、どちらか一方を小さく表示したりカラー変更したりしている見た目を実装する方法です。
今回はデモのように英語を大きく、日本語をその下に小さくそれぞれ表示させたもので、英語は通常のデバイスを使ってそのまま表示し、日本語部分はdata属性を利用して表示させています。

実装にはHTMLとCSSを以下のようにそれぞれ記述し、HTMLで赤文字表示させている箇所がdata属性を利用して表示させている内容になります。
このサンプルではそのまま表示させるものなのでdata-textとしていますが、任意のものに変更（CSSのcontent: attr(data-text);も）することもできます。

HTML

<ul>
	<li><a href="#" data-text="ホーム">Home</a></li>
	<li><a href="#" data-text="会社概要">About</a></li>
	<li><a href="#" data-text="実績紹介">Works</a></li>
	<li><a href="#" data-text="ブログ">Blog</a></li>
	<li><a href="#" data-text="お問い合わせ">Contact</a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1em;
}
ul li a {
	display: inline-block;
	padding: .2em 1em;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}
ul li a::after {
	content: attr(data-text);
	display: block;
	margin-top: .7em;
	color: #aaa;
	font-size: 11px;
}

以前はこのような見た目にしたい時には日本語部分をspanで括るなどして実装していたと思いますが、この方法を利用して問題ないのであればこのように要素をひとつ削除した形で実装することができます。

補足テキストを表示 #2

See the Pen EPQmqW by Naoya (@nxworld) on CodePen.

英語を通常のデバイスを使って表示し、ホバーするとdata属性を利用して表示させた日本語のツールチップが表示されるという動きを実装したものです。

実装にはHTMLとCSSを以下のようにそれぞれ記述し、HTMLで赤文字で表示させている箇所がdata属性を利用して表示させている内容になります。
また、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

HTML

<ul>
	<li><a href="#" data-hover="ホーム">Home</a></li>
	<li><a href="#" data-hover="会社概要">About</a></li>
	<li><a href="#" data-hover="実績紹介">Works</a></li>
	<li><a href="#" data-hover="ブログ">Blog</a></li>
	<li><a href="#" data-hover="お問い合わせ">Contact</a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1.5em;
}
ul li a {
	position: relative;
	display: inline-block;
	padding: .2em .5em;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}
ul li a::after,
ul li a::before {
	position: absolute;
	transition: .3s ease-in-out;
	opacity: 0;
}
ul li a::after {
	top: 26px;
	left: 0;
	content: attr(data-hover);
	display: block;
	width: 100%;
	padding: .6em 0 .9em;
	background-color: rgba(0, 0, 0, .5);
	border-radius: 4px;
	color: #fff;
	font-size: 11px;
}
ul li a::before {
	top: 10px;
	left: 50%;
	content: '';
	margin-left: -8px;
	border: 8px solid transparent;
	border-bottom-color: rgba(0, 0, 0, .5);
}
ul li a:hover::before,
ul li a:focus::before {
	top: 18px;
	opacity: 1;
}
ul li a:hover::after,
ul li a:focus::after {
	top: 34px;
	opacity: 1;
}

フェードで文字を切り替える

See the Pen PZQmMX by Naoya (@nxworld) on CodePen.

デフォルトのものとは別のテキストをdata属性に記述しておき、ホバーするとその指定したテキストにフェードしながら切り替わるという動きを実装したものです。
data属性はabsoluteを利用してデフォルトのテキストと上手く重なるように配置し、あとはopacityとtransitionを組み合わせて、ホバー時にフェードでテキストが切り替わるように見せています。

HTML

<ul>
	<li><a href="#" data-hover="ホーム"><span >Home</span></a></li>
	<li><a href="#" data-hover="会社概要"><span>About</span></a></li>
	<li><a href="#" data-hover="実績紹介"><span >Works</span></a></li>
	<li><a href="#" data-hover="ブログ"><span>Blog</span></a></li>
	<li><a href="#" data-hover="お問い合わせ"><span>Contact</span></a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1em;
}
ul li a {
	position: relative;
	display: inline-block;
	padding: .2em 1em;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}
ul li a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-hover);
	display: block;
	width: 100%;
	padding: .2em 0;
	transition: .3s ease-in-out;
	opacity: 0;
}
ul li a span {
	display: inline-block;
	transition: .3s ease-in-out;
}
ul li a:hover::after,
ul li a:focus::after {
	opacity: 1;
}
ul li a:hover span,
ul li a:focus span {
	opacity: 0;
}

スライドで文字を切り替える #1

See the Pen rxJwBM by Naoya (@nxworld) on CodePen.

上で紹介したものを少しいじることで、文字の切り替えをスライドするような見た目にすることが可能です。
transitionとtransform: translateYを利用して、ホバーするとデフォルトで表示されていたテキストが下に移動して見えなくなり、data属性に記述したテキストが上から降りてくるという動きになります。

HTML

<ul>
	<li><a href="#" data-hover="ホーム"><span >Home</span></a></li>
	<li><a href="#" data-hover="会社概要"><span>About</span></a></li>
	<li><a href="#" data-hover="実績紹介"><span >Works</span></a></li>
	<li><a href="#" data-hover="ブログ"><span>Blog</span></a></li>
	<li><a href="#" data-hover="お問い合わせ"><span>Contact</span></a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1em;
}
ul li a {
	position: relative;
	display: inline-block;
	padding: .2em 1em;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
}
ul li a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-hover);
	display: block;
	width: 100%;
	padding: .2em 0;
	transition: .3s ease-in-out;
	transform: translateY(-1.4em);
}
ul li a span {
	display: inline-block;
	transition: .3s ease-in-out;
}
ul li a:hover::after,
ul li a:focus::after {
	transform: translateY(0);
}
ul li a:hover span,
ul li a:focus span {
	transform: translateY(1.4em);
}

スライドで文字を切り替える #2

See the Pen dGdRbd by Naoya (@nxworld) on CodePen.

同じくスライドで文字が切り替わるような動きを実装する方法ですが、こちらはホバーするとデフォルトのテキストは下に移動して、data属性に記述したテキストも下から表示されるという動きになります。

HTML

<ul>
	<li><a href="#" data-hover="ホーム"><span >Home</span></a></li>
	<li><a href="#" data-hover="会社概要"><span>About</span></a></li>
	<li><a href="#" data-hover="実績紹介"><span >Works</span></a></li>
	<li><a href="#" data-hover="ブログ"><span>Blog</span></a></li>
	<li><a href="#" data-hover="お問い合わせ"><span>Contact</span></a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 1em;
}
ul li a {
	position: relative;
	display: inline-block;
	padding: .2em 1em;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
}
ul li a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-hover);
	display: block;
	width: 100%;
	padding: .2em 0;
	transition: .3s ease-in-out;
	transform: translateY(1.4em);
}
ul li a span {
	display: inline-block;
	transition: .3s ease-in-out;
}
ul li a:hover::after,
ul li a:focus::after {
	transform: translateY(0);
}
ul li a:hover span,
ul li a:focus span {
	transform: translateY(1.4em);
}

文字カラーを変える

See the Pen mVXwbG by Naoya (@nxworld) on CodePen.

こちらはdata属性を利用して文字カラーが変更される動きを実装する方法です。
「文字カラー変えるだけなら:hoverでcolor指定すればいいじゃん」という感じですが、data属性を利用することでちょっと変わったカラー変更の動きを実装可能で、今回はホバーするとテキストの左からカラーが変更されていくような見た目を実装する方法をご紹介します。

HTML

<ul>
	<li><a href="#" data-hover="Home">Home</a></li>
	<li><a href="#" data-hover="About">About</a></li>
	<li><a href="#" data-hover="Works">Works</a></li>
	<li><a href="#" data-hover="Blog">Blog</a></li>
	<li><a href="#" data-hover="Contact">Contact</a></li>
</ul>

CSS

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
ul li {
	display: inline-block;
	margin: 0 2em;
}
ul li a {
	position: relative;
	display: inline-block;
	padding: .2em 0;
	color: #333;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}
ul li a::after {
	position: absolute;
	top: 0;
	left: 0;
	content: attr(data-hover);
	display: block;
	width: 0;
	padding: .2em 0;
	color: #aaa;
	transition: .3s ease-in-out;
	overflow: hidden;
}
ul li a:hover::after,
ul li a:focus::after {
	width: 100%;
}

少し具体的に説明すると、まずデフォルトのテキストとdata属性を使って表示させたテキストが重なるように配置し、data属性テキストにはホバー後のカラーを指定しておきます。
あとはそのdata属性テキストにwidth: 0を指定してデフォルトでは見えなくしておき、ホバー後にそれをwidth: 100%する動きにtransitionを組み合わせることで、左からカラーが変更されていくような見た目を実装できます。

今回のサンプルでは左からカラー変更されるものでしたが、少し記述を変えれば上からなど他の方向から変更する動きも実装できますし、他にもscaleなどを利用し内側からカラー変更されていくような見栄えもできると思います。
あとは::afterだけでなく::beforeも利用して、左右からテキストを重ねるなんて見た目も面白そうですね。

上でもデモ付きで紹介してきましたが、一覧で見たい場合は以下より確認できます。

DEMO

※デモページはスマートフォンやタブレットでの見た目を考慮していませんのでPCでの閲覧推奨です。