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

January 23, 2016

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

ここで紹介している内容はdata属性を利用した実装サンプルのひとつとして紹介しており、擬似要素で表示させているテキストはあくまで装飾目的で表示している想定になります。
SEOやスクリーンリーダー対応などに影響があると考えられる場合は、しっかりとマークアップしたもので実装してください。

補足テキストを表示 #1

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではそのまま表示させるものなのでdata-textとしていますが任意のものに変更することもでき、その場合はCSSのcontent: attr(data-text);も併せて変更してください。

<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>

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

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

<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>

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

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

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

<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>

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

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

<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>

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

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

<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>

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

文字カラーを変える

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

実装にはHTMLとCSSを下記のようにそれぞれ記述し、このサンプルではホバー時に表示させるものなのでdata-hoverとしています。

<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>

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