スタイルシートマニア

ホームページカスタマイズ Tips

ナビゲーションメニュー(実用編Ⅳ)

前回のナビゲーションは各項目の横幅が統一されていたので、計算で簡単に算出できましたが毎回毎回各項目の横幅を固定するわけにもいかないです。
ということで今回は、当サイトのナビゲーションを元に各項目の横幅が全てばらばらの物を作ってみます。

この手のもので一番厄介な部分はちょうどいいbackgroundの位置を見つけ出すとことろにありますが、これをみつけだすには・・・!勘!です!ひたすら数字を入力しまくってベストなポイントを探し出す!
っというのは冗談でこれもPhotoshopなどの画像編集ツールを駆使すると簡単にできます。

demo090913

まず、一枚にしたナビゲーションの画像をPhotoshopで開きます。
そして、物指しツールでそれぞれの項目の端から端を図るとナビゲーション画像の左端を基準とした位置とそれぞれの項目の幅と高さが表示されます。
これをそのまま入力していけば簡単に背景画像の位置を調整できます。
後は、ちょっとした微調整をすると完成です。

#global-navi01 ul{
 width: 739px;
 position: absolute;
 top: 72px;
 left: 0;
}
#global-navi01 li{
 display: inline;
}
#global-navi01 li a {
 height: 28px;
 float:left;
 display:block;
 font-size:0em;
 text-decoration:none;
 text-indent: -9999px;
 outline: none;
}
/*off*/
#home a {
 background: url(../img/global-navi01.jpg) 0px 0px no-repeat;
 width: 43px;
 margin-right: 6px;
}
#cms a {
 background: url(../img/global-navi01.jpg) -50px 0px no-repeat;
 width: 202px;
 margin-right: 14px;
}
#source-branch a {
 background: url(../img/global-navi01.jpg) -266px 0px no-repeat;
 width: 107px;
 margin-right: 18px;
}
#homepage-recommendation a {
 background: url(../img/global-navi01.jpg) -392px 0px no-repeat;
 width: 147px;
 margin-right: 7px;
}
#source-marine a {
 background: url(../img/global-navi01.jpg) -545px 0px no-repeat;
 width: 107px;
 margin-right: 17px;
}
#production-rate a {
 background: url(../img/global-navi01.jpg) -670px 0px no-repeat;
 width: 64px;
}
/*hover*/
#home a:hover {
 background-position: 0px -28px;
}
#cms a:hover {
 background-position: -50px -28px;
}
#source-branch a:hover {
 background-position: -266px -28px;
}
#homepage-recommendation a:hover {
 background-position: -392px -28px;
}
#source-marine a:hover {
 background-position: -545px -28px;
}
#production-rate a:hover {
 background-position: -670px -28px;
}

僕は普段Pthotoshopを使っていますが、フリーソフトでも優秀なソフトがたくさんありますのでそれぞれ使いやすいものを見つけてください。

ナビゲーションメニュー(実用編Ⅲ)

ナビゲーション画像を一枚にしてナビゲーションを作るのって難しくてできない!っという人のために、簡単に作るコツをお教えしましょう。
今回は今まで作っていきた以下の画像を使って簡単なものからやってみます。

この画像のポイントは同じ間隔の箱(長方形)で全項目を作っているところにあります。こうするとどうして簡単なのか?というと、一つ一つの項目に横幅を設定しなくても#menu08 li a に横幅を設定するだけで一括設定されることと、各項目の背景画像が簡単な足し算で設定できるのです。

この画像の項目ひとつにつき横幅100px立幅30pxで作ってあります。
つまり#menu08 li aの設定をwidth: 100px;height: 30px;に設定すれば、各項目の横幅と立幅の設定が完了します。
そして、とっても面倒な背景画像の設定ですが、横幅が100pxで固定されているので項目ひとつが増えるたびに、-100pxプラスしていけば簡単に設定ができるのです。
そしてそして、ロールオーバー時の設定ですが、off時の背景画像の設定が完了していればその設定のまま下に並んでいる画像位置を設定するだけで簡単にできます。この場合で言えば、立幅が30pxなので、縦位置を-30pxに設定すれば完了です。

#menu08 ul {
 width: 600px;
 margin-top: 2em;
}
#menu08 li {
 display: inline;
}
#menu08 li a {
 width: 100px;
 height: 30px;
 float: left;
 display:block;
 text-decoration: none;
 font-size: 0;
 text-indent: -9999px;
 outline: none;
}
#menu08 #home01 a {
 background: url(../img/navi08.gif) 0 0 no-repeat;
}
#menu08 #cms01 a {
 background: url(../img/navi08.gif) -100px 0 no-repeat;
}
#menu08 #source-branch01 a {
 background: url(../img/navi08.gif) -200px 0 no-repeat;
}
#menu08 #homepage-recommendation01 a {
 background: url(../img/navi08.gif) -300px 0 no-repeat;
}
#menu08 #source-marine01 a {
 background: url(../img/navi08.gif) -400px 0 no-repeat;
}
#menu08 #production-rate01 a {
 background: url(../img/navi08.gif) -500px 0 no-repeat;
}
#menu08 #home01 a:hover {
 background-position: 0 -30px;
}
#menu08 #cms01 a:hover {
 background-position: -100px -30px;
}
#menu08 #source-branch01 a:hover {
 background-position: -200px -30px;
}
#menu08 #homepage-recommendation01 a:hover {
 background-position: -300px -30px;
}
#menu08 #source-marine01 a:hover {
 background-position: -400px -30px;
}
#menu08 #production-rate01 a:hover {
 background-position: -500px -30px;
}

サンプル