レスポンシブ対応するのが一般化してきましたが、まだ画像などの処理に悩むことがあります。
レスポンシブメニューでグローバルナビは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') }); }); });