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

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

●質問者: tecra
●カテゴリ:コンピュータ
✍キーワード:webサイト スクロール 教授 最上
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● Sing Do
●5ポイント

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

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

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

◎質問者からの返答

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


2 ● english
●15ポイント

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

フローティングメニュー

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


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


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

http://web.hosp.kanazawa-u.ac.jp/hp/h10/frame/kaisetsu.html

フレーム分割のhtmlの書式例

◎質問者からの返答

ありがとうございます。

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

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

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


3 ● Sing Do
●5ポイント

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

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

2度目になります

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

◎質問者からの返答

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


4 ● stnet
●5ポイント

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

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

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

<div style=”position:fixed;”>

hogehoge

</div>

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

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

◎質問者からの返答

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

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


5 ● nomico
●30ポイント

http://mugi.cc/muginavi/

muginavi

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


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

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

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


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

◎質問者からの返答

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



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