2009年12月アーカイブ

基本のHTMLソースコードは以下のとおりです。divでリストを囲まなくてもよいですが、メニュー部分ということがわかりやすいですし、デザインに幅が広がります。 class名は「section」でなくて、「menu」や「submenu」などでもよいです。

(X)HTMLコード

<div class="section">
<h2>メニュー</h2>
<ul>
<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>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /section -->

デザイン案1

ではデザインです。まずは基本ということで、リストマークを画像化、テキスト部分がアンカーになっているデザインにします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   color:#fff;
   line-height:3.0;
   padding:2px 5px 0px 5px;
   background:#3C3C3C;
}

div.section ul{
   margin:5px 0 0 0;
   padding:0;
   list-style:none;
}

div.section li{
   margin:0 0 0 5px;
   padding-left:10px;
   font-size:12px;
   line-height:2.0;
   border-bottom:1px solid #fff;
   background:url(bg_list.gif) 0 50% no-repeat;
}

div.section a {
   color:#5A5D00;
   text-decoration:none;
}

div.section a:hover {
   color:#7B8200;
   border-bottom:1px solid #7B8200;
}

リストマークを画像化するためには、ulでlist-style(-type)をnoneにし、liの背景画像でリストを表示するのが一般的です。リストの位置は、background-posionで指定(今回は一括指定しています。)、リストとテキストの余白はliのpadding-leftで調整します。

デザイン案2

上記の場合、アンカー領域がテキスト部分のみなので、人によってはクリックしにくい場合もあるかもしれません。そういう場合は、リスト部分をアンカー領域にしてクリックしやすくします。

サンプル

CSSコード

div.section {
   width:200px;
   padding:3px;
   background:#E7E7E7;
}

div.section h2 {
   margin:0;
   font-size:12px;
   text-align:center;
   background:#295DAD url(bg_h2.gif) 0 0;
   line-height:3.0;
   color:#fff;
}

div.section ul {
   margin:0;
   padding:0;
   list-style-type:none;
}

div.section li {
   margin:0;
   padding:0;
   font-size:12px;
   color:#333;
   padding-bottom:1px;
   background:#fff url(bg_dotline.gif) 0 100% repeat-x;
}

div.section li a {
   display:block;
   color:#7C9C2D;
   padding:10px 0 10px 20px;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

div.section li a:hover {
   color:#9CC23D;
   background:#fff url(bg_list.gif) 5px 50% no-repeat;
}

ポイントは、a要素を「display:block;」でブロック要素にすることです。そして、リストの画像をli要素ではなくa要素に指定する事です。こうすることで、リストマークのところまでクリックできるようになります。

これまでロールオーバーメニューをCSSのみで作ろうとした場合、ちらつきが起こったり、画像をオフにしていたら見れなかったり、アクセシビリティが低くなってしまっていました。

しかし、ある程度これらを克服したCSSの書き方がありました!しかも非常にCSSソースコードがコンパクトになっています。

詳細は上記のブログを参考にしていただければと思います。

ポイントは画像の使い方でしょうか。 HTMLにて<img src="" alt="" />でマウスオーバー前の画像を表示、CSSにて背景画像でマウスオーバー時の画像を配置し、マウスオーバー時に表示する範囲をbackground-positionで設定しています。

これらの画像をz-indexでレイヤーの順番を変更にする事で、重なった画像がうまく表示されるという仕組みですね。

本来display:-9999pxで画面外にとばしてしまうところですが、うまく下のレイヤーに隠すとはなかなか面白いですね。

altでメニューの代替テキストを表示することで、画像がオフだったり読み込まれないときでも一応読めます。

また、最初からマウスオーバー時の画像を読み込んでいるので、マウスオーバー時にちらつきが発生することもありません。

難点は画像を作るのが面倒ってことですかね。メニュー個別に分かれたマウスオーバー前の画像と、マウスオーバー時の全てのメニューがくっついた画像を用意しないといけないのは、少し手間がかかりますね。その分、CSSソースコードはシンプルになるのですが。

ソースコードを引用させていただきます。

(X)HTMLコード

<ul id="menu">
   <li class="home"><a href="#"><img src="btn_home.png" alt="HOME" /></a></li>
   <li class="product" id="current"><a href="#"><img src="btn_product.png" alt="Product" /></a></li>
   <li class="about"><a href="#"><img src="btn_about.png" alt="About" /></a></li>
   <li class="blog"><a href="#"><img src="btn_blog.png" alt="Blog" /></a></li>
   <li class="contact"><a href="#"><img src="btn_contact.png" alt="Contact" /></a></li>
</ul>

CSSコード

#menu li {
	float: left;
	position: relative;
	z-index: 3;
}
#menu li a {
	background: url(menu.png) left top no-repeat;
	display: -moz-inline-box; /* Firefox2 用のスタイル */
	display: inline-block;
}
#menu li.product a { background-position: -135px 0; }
#menu li.about a { background-position: -255px 0; }
#menu li.blog a { background-position: -375px 0; }
#menu li.contact a { background-position: -495px 0; }
#menu li a:hover {
	position: static;
}
#menu li a:hover img ,
#menu li#current a img {
	position: relative;
	z-index: -1;
}

参考サイト

以前、IE6でもposition:fixedと同じ動作をさせるというコラムを書きましたが、実際にデザインしているときに不具合に気づきました。

例えば、fixはしたくないけどもposition:absoluteで絶対配置したいボックスが、スクロールすると画面に固定になってしまうのです。当たり前なのですが。

よってIEの場合、スクロールするためのdivボックス(scrollボックス)を用意し、fix表示したいボックスはscrollボックスより外に出すようにしなければなりません。 scrollボックスでスクロールするようにしているので、htmlおよびbodyではスクロールしないようにします。

ソースコードは以下のとおりです。

(X)HTMLコード

<div id="scroll">
   <div id="contents">
      <div class="absolute">絶対配置で表示したい要素</div>
   </div><! -- /contents -->
</div><! -- /scroll -->
<div id="fix">固定したい要素</div>

CSSコード

/* IE6用 */
* html ,
* html body {
   height:100%;
   overflow:hidden;
}

* html #scroll {
   position:relative;
   width:100%;
   height:100%;
   overflow-y:auto;
   overflow-x:hidden;
}

/* 共通 */
div#contents {
   position:relative;
}

div#absolute {
   position:absolute;
   top:0;
   right:0;
}

div#fix {
   position:fixed;
   top:100%;
   right:100%;
}

/* IE6用 */
* html div#fix {
   position:absolute;
}

参考サイト