CSS によるロールオーバー

Webデザイナー見習いのトゥルーです。

CSSで実装したロールオーバーのグローバルナビゲーションやローカルナビゲーション。
今や当たり前のように見かけますが、私のような初心者は理解するまで結構大変でした。。。
今回は同じく理解に苦しんでいるという初心者の方に向けて、ロールオーバーのグローバルナビゲーションを解り易く解説していきたいと思います。

では、やり方を・・・

やり方

① 画像を用意する

まず下記のように2枚画像を用意します。

画像①はナビゲーションを一まとめにした1枚画像で実際に切り替わる画像です。

画像②はサーバーや回線の都合で読み込みが遅れて、メニュー部分が真っ白になってしまうのを防ぐ為の背景画像として使います。

② HTMLを用意する

続いてhtmlにグローバルナビ部分の要素を記述します。
今回は<ul>リストを使用しました。

<div id=”globalnavi”>
 <ul>
  <li id=”top-current”><a href=”#”>TOP</a></li>
  <li id=”menu1″><a href=”#”>MENU1</a></li>
  <li id=”menu2″><a href=”#”>MENU2</a></li>
  <li id=”menu3″><a href=”#”>MENU3</a></li>
  <li id=”menu4″><a href=”#”>MENU4</a></li>
 </ul>
<div>

③ CSSを用意する

主要部分

#globalnavi {
 width: 900px;
 height: 40px;
 margin: 0;
 padding: 0;
 background-image: url(‘画像②’) no-repeat;
}

#globalnavi li {
 float:left; ———横並びにする為に、float:leftで左に
}

a要素

まずは共通の指定を最初にします。

#globalnavi a {
 display: block; ——–インライン要素からブロック要素へ変更
 width: 180px; ——–メニューの横幅
 height: 40px;——–メニューの高さ
 color:#FFFFFF;
 font-size:14px;
 text-decoration: none; ——–リンクの下線を消す
 background: url(‘画像①’) ? no-repeat;
}

今回は文字部分をテキストにしてありますが、画像で作りたい場合はtext-indexnt:-9999px; を追加してテキストを画面外に飛ばします。

各メニュー項目

#top-current a {background-position: 0 0px;} ——–今いるページの表示画像の位置を指定
#top a {background-position: 0 -40px;} ——–通常時の表示画像の位置を指定
#top a:hover {background-position: 0 -80px;} ——–マウスオーバー時の表示画像の位置を指定

TOPのcurrentの背景は左上にあるので位置の指定はbackground-position: 0 0;になります。

通常時の背景は一枚画像の真ん中の黄色に当たるので、上に-40px分移動させる指定を行い、マウスオーバー時の背景は一枚画像を、上に-80px分移動させる事でロールオーバーを実現してます。

以下のMENU1からは上の移動に加えて左に-180pxづつ移動させる指定を行います。

#menu1-current a {background-position: -180px 0px;}
#menu1 a {background-position: -180px -40px;}
#menu1 a:hover {background-position: -180px -80px;}

#menu2-current a {background-position: -340px 0px;}
#menu2 a {background-position: -340px -40px;}
#menu2 a:hover {background-position: -340px -80px;}

#menu3-current a {background-position: -510px 0px;}
#menu3 a {background-position: -510px -40px;}
#menu3 a:hover {background-position: -510px -80px;}

#menu4-current a {background-position: -680px0px;}
#menu4 a {background-position: -680px-40px;}
#menu4 a:hover {background-position: -680px-80px;}

CSSによるロールオーバーのメリット

CSSによるロールオーバーのメリットは、

  • リンク画像を個別に用意せず一枚にまとめられる事
  • JavaScriptを切られた環境でも実行できると言う事
  • CSSの場合リンクのテキストにキーワードを挿入できるのでSEO的に良い事

などが上げられます。ナビゲーション関係はサイトを作る上で必須なので、どうせ作るならSEOにも強くアクセシビリティも強いものにしてみてはどうでしょう。

この記事と類似または関連した記事