[レスポンシブ] 画像ナビゲーションをテキストに切り替えるCSS記述

レスポンシブ対応するのが一般化してきましたが、まだ画像などの処理に悩むことがあります。
レスポンシブメニューでグローバルナビはPCだと画像で作る場合もありますが、スマホだとCSS3が使えるのでCSSとJavascriptを使った、画像をテキストに置き換える実装方法のご紹介です。

html & css

画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述します。

<nav>
  <ul>
    <li><a href="#" data-label="ホーム"><img src="images/nav1.png" alt="ホーム" width="133" height="58" /></a></li>
    <li><a href="#" data-label="サービス"><img src="images/nav2.png" alt="サービス" width="133" height="58" /></a></li>
    <li><a href="#" data-label="事例"><img src="images/nav3.png" alt="事例" width="133" height="58" /></a></li>
    <li><a href="#" data-label="会社概要"><img src="images/nav4.png" alt="会社概要" width="133" height="58" /></a></li>
    <li><a href="#" data-label="お知らせ"><img src="images/nav5.png" alt="お知らせ" width="133" height="58" /></a></li>
    <li><a href="#" data-label="お問い合わせ"><img src="images/nav6.png" alt="お問い合わせ" width="135" height="58" /></a></li>
  </ul>
</nav>

CSSは600pxをブレークポイントにして適当に調節します。
スマホサイズではナビゲーションの画像「av ul li img」を非表示「display: none」して、
「a:before」に「content: attr(data-label);」で設定したテキストを表示。

nav {
  background: url(img/nav-bg.png) repeat-x;
}
nav ul {
  list-style: none;
  width: 800px;
  margin: 0 auto;
}
nav ul li {
  float: left;
}
@media only screen and (max-width: 600px) {
  nav {
    background: none;
  }
  nav ul {
    width: 100%;
    border-top: solid 1px #bbb;
  }
  nav li {
    float: none;
    width: 50%;
  }
  nav ul li img {
    display: none;
  }
  nav li a {
    display: block;
    background: #eee;
    border-bottom: solid 1px #bbb;
    padding: 6px;
    text-decoration: none;
    color: #666;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  nav li:nth-child(odd) a {
    border-right: solid 1px #bbb;
  }
  nav li a:before {
    content: attr(data-label);
  }
}

jQueryでdata-labelを自動で設定する

さきほどはリストに「data-label」と属性を書いていますが「alt」と同じものを書くのは面倒という場合「jQuery」を使用すれば自動で設定できます。

$(function(){
  $('nav li').each(function(){
    $('a', this).attr({ 
    'data-label': $('img', this).attr('alt')
    });
  });
});