横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
メニューを横に並べて表示し、マウスオーバーでデザインを変更する
メニュー領域の全体のサイズを .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> |