HTMLとスタイル（CSS）を使ってプルダウンメニューっぽいものを考えてみる。
プルダウンっぽい部分は、スタイルの「position」を指定したタグで作成する。
positionを「absolute」にすると、そのタグの座標を、そのタグが属している領域（基準）内での絶対位置で指定できる。
座標を特に指定しなければ、本来そのタグが表示されるべき位置に表示される。
そして、その後に続いているもの（タグや文字列）が同じ位置に（重なって）表示される。（なのでポップアップ風に使える）
| コーディング例 | 実際の表示例 | 説明 |
|---|---|---|
▽この下がstatic▽<br> <b style="position:static;">あああ<br>いいい</b> △この上がstatic△ |
▽この下がstatic あああ いいい △この上がstatic |
デフォルト。 top・leftを使った座標指定は出来ない。 |
▽この下がabsolute▽<br> <b style="position:absolute;">あああ<br>いいい</b> △この上がabsolute△ |
▽この下がabsolute▽ あああ いいい △この上がabsolute△ |
top・leftを使った座標指定は、 position:static以外の指定のある親タグが基準となる。 |
▽この下がrelative▽<br> <b style="position:relative;">あああ<br>いいい</b> △この上がrelative△ |
▽この下がrelative あああ いいい △この上がrelative |
top・leftを使った座標指定は、 何も指定しない場合の本来の位置が基準となる。 |
▽この下がrelative▽<br> <b style="position:relative; top:-8px; left:32px;"> あああ<br>いいい</b> △この上がrelative△ |
▽この下がrelative あああ いいい △この上がrelative |
作ったプルダウン部分は、最初は隠しておく。
そしてJavaScriptで、メニューをクリックした際に表示してやればよい。
これはスタイルの「display」を使う。
表示を切り替えるには、JavaScriptで関数でも作っておいて、プルダウン部分のタグオブジェクトを引数にして渡せば汎用的に使える。
でも、プルダウンを表示するのは“メニューをクリックした時”でいいから特に問題ないが。
“どういうタイミングでプルダウンを消すか”はちょっと面倒そう。
（上記の例で「メニュー１」の「プルダウン」を選択すると、画面が移動してもプルダウンメニューが消えないから妙な事になる(苦笑)
また、プルダウンメニューを出したまま全然無関係な場所をクリックしても プルダウンが消えないから違和感がある。
各種動作に応じてプルダウンを消すようにしないといけないだろうが、どこまでやればいい…？）
文字や背景を半透明にするには、今のところ統一された方法は無いようだが。以下のようなスタイルで実現できるらしい。
filter: alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;filter（alpha）がIE用、-moz-opacityがNetscape用、opacityがOpera用。
CSS3ではopacityだけで指定できるようになるらしい。
なお、スタイルで背景色を指定するのは「background-color」。
メニューを横に並べるには、一番手っ取り早い方法はtableタグを使うことだと思うが…スタイルの「float」を使う。
通常は縦に並んでしまうタグでも、float:leftを指定すれば左から順に並んでくれる。
（float:rightを指定すれば、右に並ぶ。タグの属性のalign="right"みたいな指定か）
| コーディング例 | -実際の出力例- |
|---|---|
<div>なし1</div> <div>なし2</div> |
なし1
なし2 |
<div style="float:left;">left1</div> <div style="float:left;">left2</div> |
left1
left2 |
<div style="float:right;">right1</div> <div style="float:right;">right2</div> |
right1
right2 |
<div style="float:right;">right1</div> <div style="float:left;">left1</div> <div style="float:right;">right2</div> |
right1
left1
right2 |
「float」による回り込みを解除するには、スタイルの「clear」を使う。
| コーディング例 | 実際の出力例 | 説明 |
|---|---|---|
<div style="float:left;">left<br>L</div> <div style="float:right;">right<br>R</div> <hr> zzz |
left
L right
R zzz |
|
<div style="float:left;">left</div> <div style="float:right;">right<br>R</div> <hr style="clear:left;"> zzz |
left
right
R zzz |
「clear:left」だと 「float:left」指定のものを 解除する。 |
<div style="float:left;">left<br>L</div> <div style="float:right;">right</div> <hr style="clear:right;"> zzz |
left
L right
zzz |
「clear:right」だと 「float:right」指定のものを 解除する。 |
<div style="float:left;">left<br>L</div> <div style="float:right;">right</div> <hr style="clear:both;"> zzz |
left
L right
zzz |
「clear:both」だと left・right両方を解除する。 |
<div style="float:left;">left</div> <div style="float:right;">right<br>R</div> <hr style="clear:both;"> zzz |
left
right
R zzz |