|
メニューを表示
|
|
| |
|
【frameを使う】 おなじみのメニューは、
frameset
(非推奨)を使い、３枚以上のファイルを作って１枚のページを作ります。
|
| |
【作成例↓】
|
|
| |
【iframeでレイアウト】 iframeを使っても、使い回しの効くメニューに出来ます。
子ページのiframeから、親ページとなるページに、targetをコントロールしてリンクします。
|
| |
【作成例↓】
【右 (iframe-m1.html)のページ構成】
本体
ページ
の
背景 |
iframe
を表示 |
本体
ページ
を表示 |
本体
ページ
の
背景 |
具体的な HTMLリスト ↓
|
【表示例】 ( 実行例 )
|
|
|
|
|
|
| |
【スタイルシートでレイアウト】 スタイルシートを使ってレイアウトすると、レイアウト変更のし易い記述が出来ます。
全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載をします。
|
| |
【作成例↓】
【右 css-m.htmlのページ構成】
body
の
背景 |
class
.hidari
を表示 |
class
.migi
を表示 |
body
の
背景 |
具体的な HTMLリスト ↓
|
【表示例】 ( 実行例 )
|
|
|
|
|
|
| |
【CSSプルダウンメニュー】 スタイルシートを使ってプルダウンメニューを記述が出来ます。 Win版IE6 は対応していません
全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載が必要です。
|
| |
【作成例↓】
|
|
| |
| |
【作成例↓】
【右図 (menu-y.html) のページ構成】
メニュー表示ページ ( menu-y.html ) と
＋
メニューを構成する
外部JavaScriptファイル ＆
外部スタイルシートファイル
( menu-y.js ) ＆ ( menu-y.css ) で構成
【menu-y.html】 【menu-y.js】 【menu-y.css】の具体的リスト ↓
|
【表示例】 ( 実際例 )
|
|
|
|
|
|
| |
| |
【作成例↓】
【右図 (menu-x.html) のページ構成】
メニュー表示ページ ( menu-x.html ) と
＋
メニューを構成する
外部JavaScriptファイル ＆
外部スタイルシートファイル
( menu-x.js ) ＆ ( menu-x.css ) で構成
【menu-x.html】 【menu-x.js】 【menu-y.css】の具体的リスト ↓
|
【表示例】 ( 実際例 )
|
|
|
|
|
|
|
