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

解決済

質問者：kazu8212
質問日時：2010/02/08 21:25
回答数：2件

スクロールするとメニューも一緒に追いかけてくるような、floating menu について。
tableの一つのセルの中で上下するようなメニューを作成したいのですが、上手くいきません。

検索しても初心者の私にも分かりやすいよなサイトがありませんでした。
理想では下記のサイトのメニューのようにしたいのですが、ソースを見ても全く分かりません。下記のサイトではtableをしようしてないようです。

http://naturalbreeze.cside.com/material.index.html

参考にしたのは下記のサイトです。

http://www.inforz.net/jquery/219.html

実際に私が試みたHPです。↓tableで右と左のセルに分けていますが、これを左のセル内で上下するメニューを作成したいです。

http://kazu1213abi.web.fc2.com/others/float/floa …

上記のHPのようにfloating Menuをtableの中に設定しているわけではないので、当然ながら位置を指定しても見る人の画面の大きさによって左右されてしまいます。
詳しい方はどうか御教授ください。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2010/02/09 10:35

固定レイアウトみたいなので、サイズの計算はある程度は簡単にできそうですね。

・「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

テストしていませんが、解説を読む限りでは「メニュー要素」、「メニューの移動範囲要素」を指定すれば、ご質問のような機能を自由に実現できるみたい。
作成するのが面倒なら、こちらを利用するのが簡単でしょう。
エフェクトなどもいろいろ用意されているようです。

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2010/02/20 00:05

No.1

回答者： noname#137826
回答日時：2010/02/08 23:27

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.dt …

<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. … 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.j … }
#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>