CSSだけでレスポンシブで画像ナビゲーションをテキストに切り替える

html & css

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

html

	<nav>
	  <ul>
	    <li><a href="#" data-label="ホーム"><img src="img/nav01.png" alt="ホーム" width="108" height="58" /></a></li>
	    <li><a href="#" data-label="サービス案内"><img src="img/nav02.png" alt="サービス案内" width="159" height="58" /></a></li>
	    <li><a href="#" data-label="事例紹介"><img src="img/nav03.png" alt="事例紹介" width="126" height="58" /></a></li>
	    <li><a href="#" data-label="会社概要"><img src="img/nav04.png" alt="会社概要" width="130" height="58" /></a></li>
	    <li><a href="#" data-label="お知らせ"><img src="img/nav05.png" alt="お知らせ" width="126" height="58" /></a></li>
	    <li><a href="#" data-label="お問い合わせ"><img src="img/nav06.png" alt="お問い合わせ" width="151" height="58" /></a></li>
	  </ul>
	</nav>
	

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

css

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

これでとりあえず完成です。
「attr(alt)」とかできればdata属性いらないのでスマートになりそうですが、imgにはテキストを配置できないですよね。
ということでこんな感じになりました。

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

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

JavaScript

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