プルダウンメニューを上向きに表示

[新着] Webテンプレートを仮オープンしました

0   名前： Rika ： 2007/08/07（火） 03:36  ID:ScPJYcG0 sub-qi
横一列にメニューをおいて、そのメニューからプルダウンで
『上向き』に出るように表示したいと思っています。

windowsで　IE6以上、Netscape6以上、Opera7以上とFirefoxは1以上
macで6　Firefoxは1以上、Netscape6以上、safari1.2以上で対応可能にしたいのですが
うまくレイアウト崩れをせずに表示はできるものでしょうか？
特に、OperaとFirefoxのレイアウト崩れがあるのでは？と心配しています。

可能であれば、参考ソースを教えてください。
よろしくお願いします。
1   名前： 匿名 ： 2007/08/07（火） 03:36  ID:Ho1Q46qU sub-Ds
コンボもどきの自作以外ないのでは？
2   名前： 匿名 ： 2007/08/07（火） 03:36  ID:87OMork/ sub-Ds
もっていない機種が入っていて確認はとれないのでヒントだけ。リストで、インラインでなんとかなるのかなって。ｃｓｓｐｌaｙというサイトで「プルアップ」として紹介されていた。JavaScriptでなくてｃｓｓだけど。ソースは美しくないし、おすすめはしない。でも、可能だとは思うよ。
3   名前： 匿名 ： 2007/08/07（火） 03:36  ID:91nLxahb sub-Cz
<ul>
  <li style="position: relative">MENU item 1
    <ul style="position: absolute">
      <li>MENU item 1-1</li>
      <li>MENU item 1-2</li>
      <li>MENU item 1-3</li>
    </ul>
  </li>
  <li>MENU item 2</li>
  <li>MENU item 3</li>
</ul>

親の li に { position: relative }、子の ul に { position: absolute } を与えて { top: -○○px } を指定すれば良いだけ。理由は分かるよね。

JavaScript でやることは、初期化関数で

・li に { display: inline; position: relative }
・li にイベントリスナ登録
・ul に { position: absolute; top: ((ul の offsetHeight) + (li の offsetHeight))px }

これだけ。崩れるかどうかなんてのは他の部分の CSS の責任。この JavaScript とは無関係だ。

ひょっとしたら上から見て 3 2 1 の順にしたいのかもしれないが、その場合は li も絶対配置すれば良いだけで、考え方は同じだ。レイアウト制御は全て CSS の範疇なんだから、JavaScript が分からなくても、初めの配置と、終わりの配置の図は書けるよね。そうすれば、JavaScript で CSS の何のプロパティをどのくらい変更すれば良いのか、すぐに分かるはずだ。

設計が決まれば、あとはコードに落とすだけ。具体的な書き方で分からん部分があれば説明するが、もう少し具体的な設計図がないことには何とも。
4   名前： 匿名 ： 2007/08/07（火） 03:36  ID:91nLxahb sub-Cz
念のため補足。

>>3
> top: ((ul の offsetHeight) + (li の offsetHeight))px

{ left: 0px; top: -(ul の offsetHeight)px } の方が良かった。ごめん。bottom を使えれば楽なんだが、IE がバグ持ちなので何とも。

ちなみに、サブメニューを消す（visibility: hidden、display: none）必要はない。絶対配置しているわけだから、表示域の外に追い出しておいて、必要なときに呼び戻せば良い。

> もう少し具体的な設計図

例えば、「プルダウン」ということはクリックするとサブメニューが出てくるわけだよね。そのサブメニューはいつ消せば良い？

・サブメニューからカーソルを離したとき？
・他のサブメニューを開いたとき？
・ページの別の部分をクリックしたとき？

これらによってイベントリスナの登録方法が変わってくるし、場合によってはソースコードも大幅に変わる（ソースを書いて「違います」と言われるのに懲りたので）。
一覧へ戻る