CSSだけでプルダウンメニュー

このページのTipsはJavaScriptを使いません。スタイルシートのみで作成しました。せっかくがんばって考えたのに、没になったテクニックです。問題アリのTipsです。今回の問題は大したことないです。

CSSだけで
プルダウンメニュー

プルダウンメニュー・ツリーメニュー・階層メニュー・ドロップダウンメニュー色んな別名をもつ折りたたみ式のナビゲーション。これもCSSだけでやってみました。マウスがスイッチの上に乗ると、下に垂れ下がってくるメニューのことです。普通はJavaScriptを使うようなのですが、JavaScriptなしで作りました。html+css で動きます。でも、ちょっと問題ありなので使いませんでした。そんなのばっかりですが、楽しんでくだされば嬉しいです。セキュリティを気にしない客層の場合は、問題なく使えると思います

プルダウンメニューの作り方

1.html部分は

親に a 要素を使います。これは IE の hover が a にしか効かないからです。
子に span の中に table を使います。この span がcssplay(後ほどでてきます)に付け足す部分です。
孫に span の中に table を使います。この時、孫をもつ子には、クラス名を付け足します
上のオレンジ色見本では、親3が孫を持たない子どもだけ。親4が全て孫をもつ子どもだけ。1・2は混合です。
親子だけだとこうなります。親3の部分のソースです。


<A class=mouse-none href="oya3.html">親3<span>	/*ここにspanを入れるのが肝*/
<TABLE class=first><TR>
<TD>
 <A class=onmouse href="son1.html">息子1</A>
 <A class=onmouse href="son2.html">息子2</A>
 <A class=onmouse href="son3.html">息子3</A>
 <A class=onmouse href="son4.html">息子4</A>
 <A class=onmouse href="son5.html">息子5</A>
</TD>
</TR></TABLE></span></A>

孫も必要な場合は、子供要素のアンカーを閉じる直前に孫用のソースを付け足します。
まず、孫要素の親部分(つまり子)に孫ありのクラスをつけます。この場合onmouseも効いて欲しいので「onmouse second」としています。そして、アンカー直前に孫要素のhtmlを書きます。子供と孫と同じで構いません。ただ、呼び出すクラス名を変えないと同時にでてきますので、ご注意ください。親2でこども6・7のソースです。子供のみで必要なタグにはマークをつけます。孫がどうもぐりこむか見てください。


<A class=onmouse href="child6.html">こども6</A>             /*孫なしの子供
<A class="onmouse second" href="child7.html">こども7 子どもあり   /*クラス名に注目*/
 <span><table><tr>               /*アンカー前の孫要素ここから*/
   <TD>                    /*子供と全く同じです。呼び出すための*/
   <A class=onmouse href="mago1.html">まご1</A>/*クラス名を変えることにより、何段で*/
   <A class=onmouse href="mago2.html">まご2</A>/*も対応できます*/
   <A class=onmouse href="mago3.html">まご3</A>
   <A class=onmouse href="mago4.html">まご4</A>
     </TD></TR></TABLE>
 </span></A>					/*孫要素ここまで*/

よく見て、解釈すれば、ひ孫ができても同じ事だと理解できると思います。ごく普通の文章中のアンカーにマウスを乗せれば出現するテーブルをつけた。単純に言えばそれだけのことですので、もし、文章に回り込みが発生したら、親たちが次の行に行くだけです。試しにブラウザを思いっきり狭くして見てください。親が、普通の文字ですので、簡単にどこにでももぐりこめます。広いと4段・狭くすると3段、2段、1段となっていきます。でも、それぞれにプルダウンは有効です。また、並べなくても親たちをばらばらにして配置しても動くので、全く新しいことも出来そうな予感です。親要素を文字でなく画像にしてもいいし。面白い作品ができたら、是非教えて欲しいですね。

2.互換モードを宣言し、ナビゲーションと本文に名前を付けます。

このページのように固定させたい。その固定もCSSでのかたは互換モードでお願いします。固定の仕方は、月ナビで説明しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

3.CSSはこんなかんじ。

ブラウザ間の調整はしていませんので、解釈の違いが、面白い形で現れてます。それぞれと見ると、矛盾なしなので、そのまま使っていますが、気になる方はハックなどで、調整して下さい。

*{
	margin:0;		/*お約束*/
	padding:0;
	}
span{
	DISPLAY: block;			/*クロスブラウザの肝・今回の目玉*/
}

A.onmouse {			/*hoverが使いたいので、a要素でないと無理*/
	DISPLAY: block;
	FONT-SIZE: 90%;
	WIDTH: 120px;
	COLOR: #000;
	HEIGHT: 18px;
	TEXT-DECORATION: none;
}
A.onmouse:hover {
	BORDER-bottom: #e09222 4px solid;
}
A.mouse-none {         /*親の指定*/
	OVERFLOW: hidden;	/*外すと、子供まで横配列、孫横に飛び出るメニューに*/
	FLOAT: left;		/*外すと、子供まで1段縦配列、孫横に飛び出るメニューに*/
	BORDER: #000 1px solid; /*このあたりは好きにいじってください*/
	BACKGROUND: #e09222;
	WIDTH: 120px;
	COLOR: #fff;
	HEIGHT: 18px;
	FONT-SIZE: 90%;
	LINE-HEIGHT: 18px;
	TEXT-DECORATION: none;
}
A.mouse-none:hover {			/*子供メニュー仕掛け▼*/
	_OVERFLOW: visible;		/*第2の肝。*/
}
A.mouse-none:hover TABLE.first {	/*子供メニューデザイン*/
	OVERFLOW: visible;
	POSITION: absolute;		/*孫メニュー基点は子の左上*/
	DISPLAY: block;			/*子供メニュー仕掛け▲*/
	BACKGROUND: #eee;
	BORDER-COLLAPSE: collapse;
	BORDER: #e09222 4px solid;
}

A.mouse-none TABLE.first A.second {    /*子メニューでの孫メニューしかけ*/
	OVERFLOW: hidden;
}
A.mouse-none TABLE.first A.second:hover {
	OVERFLOW: visible;
	POSITION: relative;
}
A.mouse-none TABLE.first A.second:hover TABLE {/*孫メニューデザイン*/
	BORDER: #e09222 4px solid;
	BACKGROUND: #eee;
	POSITION: absolute;	/*孫メニュー基点は子の左上*/
	LEFT: 120px;		/*孫メニューの左右位置を調整*/
	TOP: -1em;		/*孫メニューの上下位置を調整。*/
}

このプルダウンメニュの問題点

この「プルダウンメニュー」、少し問題があります。問題が判明したので没なのですが。
1.ブラウザのリンク場所の表示(ステータスバー)がうまく行かないブラウザが多い。IE6・FF1.5は×。Opera8は上手く表示され、Opera9は親と本人が交互に表示され、現実的には読めない。
2.へんな表の使い方になる。
3.Operaが、挙動不信(原因不明です)。 です。

もう少し詳しく書きます。
1.セキュリティを気にするひとは、リンク先と違う場所に飛ばされるのは気持ち悪いですよね。私もその手の人です。告発サイトを応援してると、どうしても過敏になります。JavaScript嫌いなのもその為です。IE6も親の部分が常時リンク先になっているので、使えないと判断しました。JavaScript切っておられたのは、4%。それ以外では、IE6のシェアは、私の管理している別サイトで4月は90%、9月は85%でした。2009年4月ですと、26%にまで、落ちてます(2009/5/19追記)。
2.表でメニューを作っています。本当はULでやりたかったのですが、断念。しかも、文章の途中から表という気持ち悪い作り方です。lintでも減点だらけになります。
3.上に見本がありますが、メニュー部分のみのファイルも用意しました。
固定メニューにしない場合は、標準モードでプルダウンメニューのみの物を用意しました
このページのように固定メニューにしたい場合は、互換モードに変えてください。
Opera8では互換モードでマウスを放した後、孫の残骸を残すことがあります。
Opera9では両モードとも、オンマウス時に震えます

CSSplay さんの紹介

ぱくりに近いほどの参考にしたサイトがあります。
CSSplay
特に右側「Menus - Multi-Level CSS Only」です。が、劣化コピーではありません。と思います。このサイトもマルチブラウザですが、モダンブラウザ用とIE6用を別々に用意されています。私は、IE6用を工夫して、モダンブラウザにもOKな用に作り変えました。リフォームしたというより表札1つつけただけに近いです。1つの要素をプラスしてそのまま流用できるようにした。だけです。CSSplayさんの1つをこのページでは、説明し易い動作がわかりやすいように、私なりにデザインも変えて、改良して説明しています。

この CSSplay さんは他にもユニークな100% cssでのテクニック、Tips を紹介されています。pure CSS でどこまでできるか見てみたい方、目から鱗です。英語ですけど、参考にしたいのはコードですから、なんとかなるでしょう。

CSSだけで
プルダウンメニュー おしまい