Webの記録

ナビゲーションボタンのコーディングについて考えてみた

投稿日:

この記事は約 10 分で読めます。

nav_img

ナビゲーションボタンのコーディングをする時に、どんな風にコーディングしていますか?

対応するブラウザとかによっても変わると思うのですが・・・。

今回、ちょっとナビゲーションボタンのコーディングについて考えてみたので、そのメモです。

※サンプルコードは実験的に自分のファイルのものを、一部分だけいろいろ切り貼りしてるので、もしかしたらおかしな部分があるかも?です。。。参考程度に見てもらえれば有難いです。

今までのコーディングについて

今までの私は、以下の(1)~(3)をしていました。

ボタンの内容が変わるかもしれない場合は、(1)・(2)で切り替えていました。

(1)jsで画像を切り替え

ボタン素材を2種類作って、htmlではoff画像を読み込み。マウスオーバーの時にjsでon画像を読み込み。

//html例 offとon画像を作って、2種類の画像をrollover.jsで切り替え
<ul>
<li id="about"><a href="#"><img src="images/nav_01_off.gif" width="94" height="20" alt="私について"></a></li>
<li id="portfolio"><a href="#"><img src="images/nav_02_off.gif" width="37" height="20" alt="作品"></a></li>
<li id="contact"><a href="#"><img src="images/nav_03_off.gif" width="113" height="20" alt="お問い合わせ"></a></li>
<li id="blog"><a href="#"><img src="images/nav_04_off.gif" width="54" height="20" alt="ブログ"></a></li>
</ul>
//rollover.jsの例
rollovers=function(off,on){
	img=document.getElementsByTagName("img");p=[];
	off_reg=new RegExp(off+"(.[a-z]+$)","i");on_reg=new RegExp(on+"(.[a-z]+$)","i");
	for(var x=0,i;i=img[x];x++){ if(i.src.match(off_reg)){p[x]=new Image();p[x].src=i.src.replace(off_reg,on+"$1");
	i.onmouseover=function(){this.src=this.src.replace(off_reg,on+"$1");};
	i.onmouseout=function(){this.src=this.src.replace(on_reg,off+"$1");};};};};
	onload = function(){rollovers( "_off" , "_on" );}
(2)opacityを使って切り替え

ボタン素材は1種類。cssでopacityを使うことでマウスオーバーの時を表現。

//html例
<ul>
<li id="about"><a href="#"><img src="images/nav_01.gif" width="94" height="20" alt="私について"></a></li>
<li id="portfolio"><a href="#"><img src="images/nav_02.gif" width="37" height="20" alt="作品"></a></li>
<li id="contact"><a href="#"><img src="images/nav_03.gif" width="113" height="20" alt="お問い合わせ"></a></li>
<li id="blog"><a href="#"><img src="images/nav_04.gif" width="54" height="20" alt="ブログ"></a></li>
</ul>
//css例(opacityでマウスオーバーを切り替える)
a:hover {
opacity:0.7;
filter: alpha(opacity=70);        /* ie lt 8 */
-ms-filter: "alpha(opacity=70)";  /* ie 8 */
-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
-khtml-opacity: 0.7;              /* Safari 1.x */
}
(3)背景にボタン画像を設定して、cssで「text-indent: -9999px;」

ボタンに変更がない場合でスプライト画像を作った時に、テキストを「text-indent: -9999px;」飛ばしてしまう・・・ってヤツ使ってました。

//html例
<ul id="navi-container">
<li id="nav01" class="nabi-menu"><a href="#">ホーム</a></li>
<li id="nav02" class="nabi-menu"><a href="#">ライブ情報</a></li>
<li id="nav03" class="nabi-menu"><a href="#">過去ライブ</a></li>
<li id="nav04" class="nabi-menu" ><a href="#">アクセス</a></li>
<li id="nav05" class="nabi-menu current-menu"><a href="#">お問い合わせ</a></li>
</ul>
//cssでtext-indent: -9999px;の例
#nav ul#navi-container li a {
float:left;
height: 50px;
text-indent: -9999px;
overflow: hidden;
}
#nav ul#navi-container li a:hover {
background-position: 0 -50px;
}
(4)IE8以上なら、CSSを「text-indent: 100%;」+「white-space: nowrap;」

・・・で、考えました。

ボタンの変更がない3のパターンで、「text-indent: -9999px;」を使わない方法。

IE8以上なら、CSSを「text-indent: 100%;」+「white-space: nowrap;」

#nav ul#navi-container li a {
float:left;
height: 50px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
#nav ul#navi-container li a:hover {
background-position: 0 -50px;
}
(5)「text-indent: -9999px;」を使わずに、IE7対応しないといけない時

IE6を切ったとしても、どこまでIE7を対応しないといけないのでしょう。。。早いところIE7を切ってせめてIE8以上にしたいですが・・・。

そこで、「text-indentの代わりに透明GIFを使うという方法」という面白そうな記事を見つけたので、早速試してみました
text-indentでテキストを消す代わりに使っている背景画像を表示する方法(youtubeも採用)」|バンクーバーのWEB屋

//html例(pix.gifは1px四方の透明画像)
<div class="side_banner">
<p id="blog"><a href="http://blog.gratielive.littlestar.jp/" target="_blank" class="side_btn"><img src="images/common/pix.gif" alt="Gratie★Live Blog"></a></p>
</div><!-- /side_banner -->
//css例
.side_btn {
background: url(../images/common/side_btn.png) no-repeat;
display: block;
}
.side_banner #blog a {
background-position: 0 0;
width: 200px;
height: 50px;
overflow: hidden;
}
.side_banner #blog a:hover {
background-position: 0 -50px;
width: 200px;
height: 50px;
overflow: hidden;
}

まとめ

対象ブラウザによって、またナビゲーションボタンの素材変更があるかないか・・・で、どの方法も使う可能性はあるかなと思ってます。

今まで「おまじない」のように「text-indent: -9999px;」を使ってましたが、これから使わなくなっていくのかな?と思うとちょっと面白かったです。

ナビゲーションボタンの変更がなくて、「text-indent: -9999px;」を使わないとなると・・・。
対象ブラウザがIE8以上だったら(4)で良いと思いますが、IE7も対応しなくてはならない時は(5)を使うのが良さそうな気がしてます。(YouTubeが使ってるらしい。。。)

【おまけ】

他に興味のある記事が1つあったので、これもいつか試してみたいと思ってます。
画像置換のあれへの補足|terkel.jp

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …