table内で上下するfloating menuについて

2010/02/08 21:25

このQ&Aのポイント

table内で上下するfloating menuを作成する方法を紹介します。スクロールするとメニューも一緒に追いかけてくるような、使いやすいメニューを実現することができます。
検索しても初心者の方でも分かりやすいサイトは見つけにくいですが、参考になるサイトやコードが存在します。参考になるサイトを紹介します。
floating menuをtable内に設置することも可能ですが、画面のサイズに依存してしまうため、他の方法をおすすめします。具体的な方法やコードについては詳細な説明をするので、ぜひ参考にしてください。

kazu8212
お礼率47% (9/19)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/02/09 10:35 回答No.2

固定レイアウトみたいなので、サイズの計算はある程度は簡単にできそうですね。・「position:absolute」で行なうなら divをtd内に記述する必然性はありません。最初にtdの大きさを取得しておいて、その範囲の中でtop、leftを制御してあげればよいのではないでしょうか？リサイズされるとleftの位置が変わるので、そのときのイベントも取得する必要がありそうです。・「position:relative」で行なうなら基本的に親要素(td)に対しての相対位置になりますので、leftは固定できます。　（300-180）/2=60pxならセルの中央とか。リサイズしても変わりません。初期状態を明確にしておくために、tdのalignなどを指定しておくほうがよさそう。 topの絶対値はtdのtop+相対位置になるので、scrollから計算するのにちょっと注意が必要。（サンプルのレイアウトなら固定値でもいけそうですが）さて、ご提示の参考サイトですが… メニューの移動は↓のライブラリを利用しているようです。 http://youmos.com/project/wrapscroll テストしていませんが、解説を読む限りでは「メニュー要素」、「メニューの移動範囲要素」を指定すれば、ご質問のような機能を自由に実現できるみたい。作成するのが面倒なら、こちらを利用するのが簡単でしょう。エフェクトなどもいろいろ用意されているようです。

質問者

お礼 2010/02/20 00:05

回答ありがとうございました。 wrapscrollの存在を知らなかったので勉強になりました。 wrapcscrollで作成してみようと考えています。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

noname#137826

2010/02/08 23:27 回答No.1

tableのセル内で動いているように見えるのであればよいのですよね？こんな感じでどうでしょう？実際にセル内にメニューの要素を入れる必要はありません。 Javascriptでtableの位置を取得してメニューをそこに合わせています。 --- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>KAZU JAVA/floating menu</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script> var adjustMenuPos = function(){ $('#menu').css({ top: $('#main').offset().top + 10, left: $('#main').offset().left + 60 }); }; $(function(){ adjustMenuPos(); }); $(window).resize(adjustMenuPos); </script> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #000; } #main { width: 800px; height: 2000px; background-color: #fff; margin: 0 auto; } #mainRight { width: 500px; } #menu { position: fixed; top: 0px; left: 0px; width: 180px; background-color: #fff; border: 1px solid #000; text-align: center; } #menu dt { height: 36px; border-bottom: 1px solid #000; color: #fff; background-image: url('http://kazu1213abi.web.fc2.com/img/menu-center.jpg'); } #menu ul { list-style-type: none; } </style> </head> <body> <table id="main" border="1" cellspacing="0"> <tr><td></td><td id="mainRight"></td></tr> </table> <dl id="menu"> <dt>MENU</dt> <dd> <ul> <li>MENU1</li> <li>MENU2</li> <li>MENU3</li> </ul> </dd> </dl> </body> </html>

ログインすると、全ての回答が全文表示されます。