レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。
cssの:before attr属性で解決
html
[php]<ul id="nav">
<li><a data-text="ホーム"><img src="
nav_home.png" alt="ホーム"></a></li>
<li><a data-text ="店舗案内・アクセス"><img src="nav_shop.png" alt="店舗案内"></a></li>
<li><a data-text ="お問い合わせ"><img src="nav_contact.png" alt="お問い合わせ"></a></li>
</ul>[/php]
htmlファイルのaタグにdate-◯◯を設定。
◯◯は自由に設定可能。
css
[php]@media (max-width: 767px) {
#nav li a:before {
content: attr(data-text);
}
#nav li img {
display: none;
}
}[/php]
画面サイズが767px以下の場合は、aタグのdata-textの文字を取得して、a要素に追加。
元の画像はdisplay:noneで非表示に。