株式会社アイネックスはソフトウェアの開発、データ復旧サービス、ホームページの作成ツール企業です。

横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
    データ復旧サービス、ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

03-04)  1. 横方向のリストに背景画像を敷き、マウスオーバーでデザインを変更する

 

メニューを横に並べて表示し、マウスオーバーでデザインを変更する

メニュー領域の全体のサイズを .menu-line クラスのwidth:プロパティで指定し、
5個の個別選択メニューのサイズは li 要素のwidth:float:プロパティで指定する
マウスオーバー時( li a:hover )のプロパティを活用して
画像(background:)、文字の色(color:)を変更する。

cssの書き方 /*-------------------------------------------------------
03-04 メニュー(サンプル)
-------------------------------------------------------- */
.menu-line {
 width:600px; /* メニュー部のサイズ*/
 overflow:hidden;
 padding-left:2px;
 list-style-type:none;
 background:url("../images/bg_list_left.gif") 0 0 no-repeat;
}
.menu-line li {
 width:120px; /* 個別メニューのサイズ*/
 float:left;
 font-size: medium;
 color:#333;
}
.menu-line li a {
 display:block;
 padding:20px 0;
 width:120px;
 height:30px;
 color:#fff;
 line-height: 1.2;
 text-align:center;
 text-decoration:none;
 background:url("../images/bg_list.gif") 100% 0 no-repeat;
}
.menu-line li a.current {
 color: black;
 background:url("../images/bg_list_on.gif") 100% 0 no-repeat;
}
.menu-line li a:hover {
 color: red;
 background:url("../images/bg_list_on.gif") 100% 0 no-repeat;
}
HTMLの使用例 <ul class="menu-line">
<li><a href="#">HOME</a></li>
<li><a href="#">最新情報</a></li>
<li><a href="#">事業内容</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">採用情報</a></li>
</ul>