WEBサイトのページ上部におくナビゲーションメニューを、ページをスクロールしても常にページ最上部に表示させるようにしたいのですが、どなたかよい方法をご教授いただけないでしょうか?

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/03/29 23:10:49
  • 終了:--

回答(6件)

id:Natas No.1

Sing Do回答回数15ベストアンサー獲得回数02005/03/29 23:15:31

ポイント5pt

http://heo.jp/tag/page/frame.html

フレームタグ/ページタグ/みんなのタグ辞書/HTMLタグ辞書

フレームを使っても良いというならナビゲーションメニューと本文を別々にフレームで分割するのが手っ取り早いのでは?

id:tecra

すいません、情報が不足していました。ナビゲーションメニューのボタンを押すと直下にポップアップメニューが表示されるようにしたいのです。別フレームにしてしまうと下部にポップアップメニューを表示することが出来ないので、よろしければフレーム分割以外の方法を教えていただけないでしょうか。

2005/03/29 23:27:16
id:english No.2

english回答回数304ベストアンサー獲得回数02005/03/29 23:21:03

ポイント15pt

http://himajin.moo.jp/menu/menu8.html

フローティングメニュー

一番簡単なのはフレームを使うことです。


もしくは、Javascriptの知識が必要ですが、参照URLのようにして、スクロールするごとにメニューが動くように作成します。


ただ、Javascriptが結構複雑ですし、メニューの動きがどうしてもなめらかでないので、やはりフレームが一番簡単な解法だと思います。

id:tecra

ありがとうございます。

しかしながら、情報が不足していて申し訳ないのですが、1つ前の回答のレスにも書きましたとおりの事情で、フレームは使えないのです。

また、紹介していただいたスクリプトはポップアップメニュー付きのメニューには対応していないようです。

もしよろしければ、「ポップアップメニュー付きのナビゲーションメニュー」で使えるjavascriptをご紹介いただけないでしょうか?

2005/03/29 23:34:51
id:Natas No.3

Sing Do回答回数15ベストアンサー獲得回数02005/03/29 23:39:42

ポイント5pt

http://www.openspc2.org/JavaScript/library/form/select_jump_butt...

ポップアップメニューかボタンで選択されたページにジャンプ

2度目になります

このようなものでよろしいのでしょうか?

id:tecra

ありがとうございます。しかしながら、この方法はポップアップメニューは表示できても、メニューの位置が常に最上部に表示されるようには出来ないように思います。一つ前のenglishさんに紹介いただいたようなスクリプトで、なおかつポップアップメニューにも対応したものを教えていただけると助かります。

2005/03/29 23:50:56
id:stnet No.4

stnet回答回数804ベストアンサー獲得回数342005/03/29 23:45:35

ポイント5pt

http://www.hatena.ne.jp/1112105449

人力検索はてな - WEBサイトのページ上部におくナビゲーションメニューを、ページをスクロールしても常にページ最上部に表示させるようにしたいのですが、どなたかよい方法をご教授いただけ..

メニューのところのソースを下記<div>で囲めば絶対位置固定にできます.これで出来ませんかね

<div style=”position:fixed;”>

hogehoge

</div>

http://www.tohoho-web.com/css/reference.htm#position

とほほのスタイルシート入門

id:tecra

スタイルシートの絶対位置は、親要素に対する相対位置を固定するものなので、ページ自体がスクロールする、つまり親要素がスクロールしてしまう状況では、メニュー部分も一緒にスクロールしてしまうと思います。

出来れば、2番目のenglishさんの回答でご紹介頂いたスクリプトのようなもので、なおかつポップアップメニューに対応したものを教えていただけると助かります。

2005/03/29 23:56:53
id:nomico No.5

nomico回答回数3ベストアンサー獲得回数02005/03/30 00:54:49

ポイント30pt

ここのmuginaviというのが要望を満たしているかもしれません。


・フローティングメニュー可

・各メニューからポップアップメニュー可

・ポップアップは2階層以上可


実装方法も多種あるので「サンプル」部分で探してみてください。

id:tecra

ここのサンプルのトップナビゲーションバーが、私の要望にぴったりでした。実装は簡単ではなさそうですが挑戦してみます。ありがとうございます。

2005/03/30 02:14:22
id:stnet No.6

stnet回答回数804ベストアンサー獲得回数342005/03/30 01:49:52

ポイント30pt

http://www.tryhp.net/dynamic06.htm

ポップアップメニューの作成

おっと失礼

position:fixed;はIEは対応してないんでした...

OpreaとかならOKなんですけどね.


このポップアップメニューと

http://allabout.co.jp/career/javascript/closeup/CU20010713/

クロスブラウザを制する Part 2 2-7 レイヤーの位置固定 - [JavaScript]All About

この位置固定を組み合わせればいけますね(確認済み)


<div id=”fixedLay0” class=”fixedLay”></div>の間を上記ダイナミックメニューのコードに置き換えて<script>タグ内の

menuID.className=’0’;

menuID.className=’1’;

をそれぞれ

menuID.className=’0 fixedLay’;

menuID.className=’1 fixedLay’;

に置き換えればOK

id:tecra

使いやすそうなスクリプトでとても参考になりました。早速試してみようと思います。ありがとうございました。

2005/03/30 02:28:54
  • id:smoking186
    一応IEでも擬似fixedが可能です。

    「IE fixed」で検索するとあっさり見つかりますね。
    cssでも条件付で出来るということで。
    http://tagsoup.com/-dev/null-/css/fixed/

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません