WEBOPIXEL

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

Posted: 2012.11.09 / Category: HTML&CSS, javascript / Tag: ,

グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。
そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。

Sponsored Link
demo

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

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。