- ベストアンサー
table内で上下するfloating menuについて
- table内で上下するfloating menuを作成する方法を紹介します。スクロールするとメニューも一緒に追いかけてくるような、使いやすいメニューを実現することができます。
- 検索しても初心者の方でも分かりやすいサイトは見つけにくいですが、参考になるサイトやコードが存在します。参考になるサイトを紹介します。
- floating menuをtable内に設置することも可能ですが、画面のサイズに依存してしまうため、他の方法をおすすめします。具体的な方法やコードについては詳細な説明をするので、ぜひ参考にしてください。
- kazu8212
- お礼率47% (9/19)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （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 テストしていませんが、解説を読む限りでは「メニュー要素」、「メニューの移動範囲要素」を指定すれば、ご質問のような機能を自由に実現できるみたい。 作成するのが面倒なら、こちらを利用するのが簡単でしょう。 エフェクトなどもいろいろ用意されているようです。
その他の回答 (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>
お礼
回答ありがとうございました。 wrapscrollの存在を知らなかったので勉強になりました。 wrapcscrollで作成してみようと考えています。