Windowsで、FireFoxのメニューバーを非表示にしてしまうと、再表示させる方法が分かりづらいのでメモ。
解決方法
操作は簡単で、FireFoxを表示中に、「ALT」を押す!
以上です (´ー`)
Macの場合は各アプリケーションのメニューは画面の一番上に表示されているので、メニューバーの表示、非表示はいつでも簡単に切り替えられます。…
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。
cssの:before attr属性で解決
html
<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>
htmlファイルのaタグにdate-◯◯
を設定。
◯◯は自由に設定可能。
css
@media (max-width: 767px) { #nav li a:before { content: attr(data-text); } #nav li img { display: none; } }
画面サイズが767px以下の場合は、aタグのdata-text
の文字を取得して、a要素に追加。
元の画像はdisplay:noneで非表示に。
この投稿へのコメント
コメントはまだありません。