シフトするメニュー
だいぶご無沙汰してしまいました。
予期せぬ移転で、ただでさえページ内のパス変更で時間がかかるのに大方作り変えようなんて
ちょっと無謀だったかな（＾＾；
でも、「こういうことしたい！」って思ったことは多少の労力は惜しまずやりたいと思ってます。
今の自分に無い知識でも、HPを作る上で技術的に可能なことは新しく覚えてやっていきたいじゃありませんかー！（←なにこの熱さ。選挙演説の煽り？？）
このサイトでカラーパレット以外のページで上の方についているメニュー・・・面白いでしょ？（＾＾）
最初はよくJavaScriptのサンプルで見かける折りたたみメニューを駆使して色々やってみました。
でも、「横長」であること、「センタリング」していることで、無理やりそこまでするかなぁ〜；；；って
感じでした。ガッチリ見た目を完璧にすればするほどスクリプトは長くなる。＝重くなる。
おいおい、たかがメニューだよ（＾＾；
ひらめきはいつも突然やってきます。
「細長ーいインラインフレーム」 + 「アンカー付きリンク」
ちょっとコレをご覧下さいませ。
http://web-img.com/menu.htm
画面のサイズ（特に縦方向）を小さくすると分かり易い。
そそ、大見出しをクリックすると、小見出しの一覧が書いてある行に飛ぶんです。
これを、各ページの一番上に１行分だけ見える細長いインラインフレームから覗かせると
あたかもシフトしているように見えるわけです（＾＾）
コンテンツが多い方には便利かもしれませんね。
メニューはソースを見ていただくとして、
各ページに貼るほうのインラインフレームはちょっとした注意が必要です。
<iframe src="メニューのURL"
scrolling="no" frameborder="0"
marginwidth="0" marginheight="0"
width="780" height="20">
<div align="left">
<a href="トップページアドレス">HOME</a></div>
</iframe>
scrolling="no" スクロールさせません
frameborder="0" 枠のサイズはゼロです（見えなくします）
marginheight="0" フレームの中の縦方向の余白はゼロ。
marginwidth="0" フレームの中の横方向の余白はゼロ。
余白はページ内のデザインに影響が出ないよう、最小限に抑えるためゼロにしてます。
width="780"
フレーム（表示枠の幅）は780ピクセル
height="20"
フレーム（表示枠の縦）は２０ピクセル
フレームのサイズは、お使いになるメニューにあわせて調整して下さい。
<iframe src="メニューのURL"
scrolling="no" frameborder="0"
marginwidth="0" marginheight="0"
width="780" height="20">
</iframe>
大半のブラウザでは、これでOKなのですが、インラインフレームに対応していないブラウザ（NN4など）
ではメニューは全く表示されません。
なので、
<div align="left">
<a href="トップページアドレス">HOME</a></div>
このようにせめてHOMEへのリンクだけでも貼りましょう。
出来上がったら、各ページで<body>タグのすぐ下に
<iframe src="メニューのURL"
scrolling="no" frameborder="0"
marginwidth="0" marginheight="0"
width="780" height="20">
<div align="left">
<a href="トップページアドレス">HOME</a></div>
</iframe>
このタグをコピーすればOKです。
ほとんどソースを見れば分かってしまう事でしたが、
ここに書いたということで、皆さんも試してみて下さいね（＾＾）
NOEL
'03.11.09 |
