人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ウェブサイト制作について質問です。

CSSとJavascriptを使ったポップアップメニューなのですが、IE6とFireFox1.5?2ではちゃんと動いていました。
しかし、IE7ではうまく動かないことが判明してしまいました。(すべてwindowsXP sp2で確認)

原因を探ったところ、メニュー全体に指定しているCSSの「position:absolute」でした。
(具体的には、メニュー全体を<div id="navbar"></div>で囲んでいて、CSSにおいて#navbarのプロパティでpositionを指定しています)
これをはずせばきちんと動きますが、そうするとレイアウトが崩れるのでできません。
なにかよい方法はありますでしょうか。
お知恵をかしてください。

以下のリンクに、ポップアップメニューとコードがあります。
よろしくお願いします!
http://syuwach.nigamushi.net/test.html

●質問者: syuwach
●カテゴリ:インターネット ウェブ制作
✍キーワード:absolute CSS IE6 IE7 JavaScript
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● pahoo
●27ポイント

IE7だけでなくWindows版のIE全体の仕様(?)の影響と考えられます。「IEで position:absolute した要素が消えるバグ」を参考にしてください。

対策としては、

#navbar{
position: relative;
}

とするのが手っ取り早いのですが、メニューバーの位置を絶対座標で指定されているのでしょうか? その場合は、個別の要素を position:absolute 指定することで、何とか調整してみてください。

◎質問者からの返答

ありがとうございます。

お察しの通り、絶対座標で指定しています。

個別の要素をpositon:absolute指定もレイアウト上難しそうです・・・。


2 ● tokuya_n
●27ポイント

たぶん、ここで質問されている問題と同じではないかと。

同じ解決策ではどうでしょう。Timeoutを設定して過敏反応を緩和する感じですね。

http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1015339...


まあ,メニュー開いたら,クリックするまで閉じない(onmouseoutはつかわない)ようにするのもありかなと思いますが。

◎質問者からの返答

ありがとうございます。

上記のサンプルだと、クリックしたらメニューが開くタイプですね。

改造すればロールオーバーでメニューが開くようになるのでしょうか??

ちょっと難しそうです。

追伸

position:absolute指定をしてもポップアップメニューがきちんと動くサンプルとかありますかね??


3 ● tokuya_n
●26ポイント

メニューを開いたら,クリックするまで閉じない,でよければこんな感じでまあそれっぽく動きます。

(WindowsVista sp1, IE7 で確認 - 大なり小なりは半角に置換してください)

<script language="javascript">

function sswch(id,p){document.getElementById(id).style.visibility=p;return true;}

</script>

</head>

<body onclick="sswch('n_pop','hidden')">

<div id="navbar">

<div class="menu">

<h2 onclick="sswch('n_pop','visible')" onmouseover="sswch('n_pop','visible')"><a href="#">News</a></h2>

<ul id="n_pop">

<li><a href="#" onclick="sswch('n_pop','hidden')">ニュース</a></li>

<li><a href="#" onclick="sswch('n_pop','hidden')">ニュース</a></li>

<li><a href="#" onclick="sswch('n_pop','hidden')">ニュース</a></li>

<li><a href="#" onclick="sswch('n_pop','hidden')">ニュース</a></li>

</ul>

</div>

</div>

凝りたければこんなのもあります。(IE7でもFirefox2でも動きました)

http://hyper-text.org/archives/2006/12/slide_menu_javascript.sht...

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ