【ナビを簡単に設置する方法】

ナビって意外と作りこむのが面倒なところがあるんですよね。
私も、この作業が一番苦手分野でした。
マウスを乗せた時に、正確に画像が切り替わらないと非常にみにくい。
そして、1pxでもズレると全てが崩れてしまう。
計算しながら画像作成していく工程がどれだけ苦痛だったか･･･（笑）

で、編み出したのがコチラの方法です。
（いろいろ方法はありますが、私はデザインする上でも一番簡単で便利かと思います）

●一枚の画像を使って画像を切り替える方法

CSSで画像の置き換え指定を設定することで、マウスを乗せた時に
画像が切り替わると言う仕組みです。

例えば以下のようなナビ画像を作ります。
背景に設定する画像は、ナビのデザイン（上部なのかサイドなのか）で
異なりますが、今回は分かりやすくTOPの横ナビで･･･。

ナビを一枚の画像で作る方法

背景画像のheightの半分のheightをアンカーに設定し、
background-positionをtopに設定することで、
通常時の画像のみ表示させます。

上のイラストで見ると･･･

上：デフォルト状態
下：マウスを乗せた時＆そのページを開いているとき。の状態になりますね。

この方法だと、画像ファイルが1つで済み、メニューが変わった時なども
便利で管理がしやすいのです。（個人的に）

●実際の設置例

（htmlコーディング）************************************************************

<ul id=”globalNavi”>
<li><a href=”/” >HOME</a></li>
<li><a href=”/guidance/”>お仕事の内容</a></li>
<li><a href=”/work/”>お仕事の流れ</a></li>
<li><a href=”/reference/”>サポート体制</a></li>
<li><a href=”/voice/”>女の子の声</a></li>
<li><a href=”/faq/”>よくあるご質問</a></li>
<li><a href=”/com/”>会社概要</a></li>
</ul>

（cssサンプル）************************************************************

#headerArea #globalNavi {
width: 962px;
height: 47px;
position: absolute;
top: 112px;
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi li, #headerArea #globalNavi li a {
height: 46px;
}
#headerArea #globalNavi li {
float: left;
display:inline;
}
#headerArea #globalNavi li a {
display:inline-block;/*ieHack*/
overflow:hidden;
text-indent:-9999px;
}
#headerArea #globalNavi li a {
display:block;
}
#headerArea #globalNavi li a.active, #headerArea #globalNavi li a:hover {
background-image: url(../iimg/gnavi.jpg);
}
#headerArea #globalNavi .m1, #headerArea #globalNavi .m1 a {
width:86px;
}
#headerArea #globalNavi .m2, #headerArea #globalNavi .m2 a {
width:145px;
}
#headerArea #globalNavi .m3, #headerArea #globalNavi .m3 a {
width:146px;
}
#headerArea #globalNavi .m4, #headerArea #globalNavi .m4 a {
width:145px;
}
#headerArea #globalNavi .m5, #headerArea #globalNavi .m5 a {
width:146px;
}
#headerArea #globalNavi .m6, #headerArea #globalNavi .m6 a {
width:146px;
}
#headerArea #globalNavi .m7, #headerArea #globalNavi .m7 a {
width:148px;
}
#headerArea #globalNavi .m1 a:hover {
background-position:0px -46px;
}
#headerArea #globalNavi .m2 a:hover {
background-position:-86px -46px;
}
#headerArea #globalNavi .m3 a:hover {
background-position:-231px -46px;
}
#headerArea #globalNavi .m4 a:hover {
background-position:-377px -46px;
}
#headerArea #globalNavi .m5 a:hover {
background-position:-522px -46px;
}
#headerArea #globalNavi .m6 a:hover {
background-position:-668px -46px;
}
#headerArea #globalNavi .m7 a:hover {
background-position:-814px -46px;
}
#headerArea #globalNavi .m1 a.active {
background-position:0px -92px;
}
#headerArea #globalNavi .m2 a.active {
background-position:-86px -106px;
}
#headerArea #globalNavi .m3 a.active {
background-position:-231px -92px;
}
#headerArea #globalNavi .m4 a.active {
background-position:-377px -92px;
}
#headerArea #globalNavi .m5 a.active {
background-position:-522px -926px;
}
#headerArea #globalNavi .m6 a.active {
background-position:-668px -92px;
}
#headerArea #globalNavi .m7 a.active {
background-position:-814px -92px;
}

お楽しみに＾＾★━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【ウェブクリエイトが制作したサイトのPR】
■太陽光はカーポートでメンテナンスも楽々！
http://kmcllc.co.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━