CSSのみでプルダウンメニューを実現する。その1: ポルカの日記

<< メリタ　アロマサーモ　マグ　コーヒーメーカーを買うぞ | TOP | CSSベースでのHTMLコーディング順序　その8 >>

2008年04月03日

CSSのみでプルダウンメニューを実現する。その1

CSSのみでプルダウンメニューを実現してみます。

と、いうのも、
またもや、お仕事仲間である、
万年青年のルイス兄さんに、

javascriptなしでも、プルダウンできますよ。
とお伝えしたら、後日になって、
------------------------------------------------------------
やっぱりプルダウンメニューって
javascript併用やないと、IEで動かなかった。
------------------------------------------------------------

と、言われ、
へー、そーだったんですか、
と返事したものの…

職人としてこれでエエのか、
と思うところもあり、

都度都度、ふと思うあっても使うことがなかったのと、
あるお仕事で、メインナビゲーションをプルダウンにしてたら、
そのときのクライアントから、
分かりにくいとか、使いづらいとか、言われてヤメたこともあり…

それ以降は、他からも特に要望がなかったので、
ほったらかしにしていましたが、

他のCSSを説明するサイトを改めて見てみますと、
結構サンプルがあるようですし、
（今更ながら）遅れまじ、とも思いましたので

javascriptを使わずに、利用しやすい
究極（？）のプルダウンメニューに挑んでみました。

通常、プルダウンメニューをCSSで行う場合は、
子にあたるメニューの横幅や、
高さ幅を決めていることがほとんどですが、

その場合、
画像を利用したボタンなら大丈夫なものの、
テキストを使ったメニューでは、

横幅の制限がキツいと
メニューの文言を考えるのに、
結構難儀してしまうことがあります。

今回のミッションの目的は、
子メニューが下方向に伸びるのではなく、
横方向に伸び、かつ、サイズが可変できる、
（テキストでのメニューがつくりやすい）
ものをつくることです。

▽CSSベースのHTML
プルダウンメニュー
（子メニューは横並びでサイズ可変）
------------------------------------------------------------
今回はCSSに関する解説も
ソース内に入れ込んでみました。
------------------------------------------------------------
＜例＞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSSのみでプルダウンを実装してみる　その1</title>
<style type="text/css">

</style>
</head>

<body>

<div id="menubar">
<ol>

<li>
<a href="http://www.google.co.jp/" target="_blank">▼Google</a>
</li>


<li>
<a href="http://www.yahoo.co.jp/" target="_blank">▼YAHOO！</a>
<ol>
<li><a href="#">○メニューA</a></li>
<li><a href="#">○メニューBB</a></li>
</ol>
</li>


<li>
<a href="http://www.live.com/?searchonly=true&mkt=ja-jp" target="_blank">▼Live Search（MSN）</a>
<ol>
<li><a href="#">○メニューA</a></li>
<li><a href="#">○メニューBB</a></li>
<li><a href="#">○メニューCCC</a></li>
</ol>
</li>


<li>
<a href="http://www.excite.co.jp/" target="_blank">▼excite</a>
<ol>
<li><a href="#">○メニューA</a></li>
<li><a href="#">○メニューBB</a></li>
<li><a href="#">○メニューCCC</a></li>
<li><a href="#">○メニューDDDD</a></li>
</ol>
</li>

</ol>
</div>

</body>
</html>

※id名やclass名は任意です。
------------------------------------------------------------
Mac Safari3.0, FF2.0
Windows IE7.0 FF2.0 で確認
------------------------------------------------------------

今回のポイントは
●<li></li>に疑似クラス「:hover」を設定していること。
→リンクの文字上だけだと、子メニューが選択しずらいので。
●親メニューの<li></li>にposition: relative; を設定し、各左上を起点にするようにしていること。
→これにより、子メニューは、その各起点をもとに位置が設定されます。
です。

残念ながら、
子メニューを完璧な可変サイズには、
できませんでした。

【05】の
横幅を600px という部分がそれなのですが、
この記述を可変（例えば100％など）にすると、
子メニューは横ならびにならずに、下方向へ改行されて表示されます。

なので、
上記ソースを使う際は、作成されているデザインにあわせて、
子メニューに必要なサイズを求めるようにして、
600pxを適当な数値に変えてもらえたら、と思います。

また、float: left;を使って、横並びさせているので、
メニューの下のレイアウト表示が崩れる場合は、
適当にclear: left;をどこかに記述してください。

とりあえずは、このような結果でしたが、
さらに究極を目指して、研究していきたいと思います。

【MEMO】
単純に親メニューの下方向に、子メニューが並ばせる場合は、
【04】…floatの記述を削除
【05】…横幅の指定を削除、もしくは、小さめのサイズにする。
でいけます。

▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽　▽

簡単なHTMLを組めるようになったくらいで、
CSSに挑戦！　という頃からお世話になってる本です。

タグ、CSSともに、項目別に整理が行き届いており、
簡単なサンプルがついているので、非常にわかりやすかったです。

なにより、
本のレイアウトがシンプルで見やすく、
読みやすいのがナイスです。

これで、開きっぱなしにできたら最高なんですけど…

最新版は、かなりボリュームがたっぷりで、
分厚くなったな～　と思います。

まだ、この手のリファレンス本を
買われていない方がいらしたら、
購入検討されてはいかがでしょう。

△　△　△　△　△　△　△　△　△　△　△　△　△　△　△

タグ：CSS javascript プルダウンメニュー

【CSS実験室の最新記事】

posted by CSSベースでのHTML（XHTML）レイアウト入門講座＜polka＞ at 08:18 | CSS実験室 |

ポルカの日記 | CSSベースのHTMLレイアウト入門講座

2008年04月03日

CSSのみでプルダウンメニューを実現する。その1