メニューを作る
|
|
| |
|
【frameを使う】 おなじみのメニューは、
frameset
を使い、３枚以上のファイルを作って１枚のページを作ります。
|
| |
【作成例↓】
|
|
| |
【iframeでレイアウト】 iframeを使っても、使い回しの効くメニューに出来ます。
子ページのiframeから、親ページとなるページに、targetをコントロールしてリンクします。
|
| |
【作成例↓】
【右 (iframe-m1.html)のページ構成】
本体
ページ
の
背景 |
iframe
を表示 |
本体
ページ
を表示 |
本体
ページ
の
背景 |
具体的な HTMLリスト ↓
|
【表示例】 ( 実行例 )
|
|
|
|
|
|
| |
【スタイルシートでレイアウト】 スタイルシートを使ってレイアウトすると、レイアウト変更のし易い記述が出来ます。
全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載をします。
|
| |
【作成例↓】
【右 css-m.htmlのページ構成】
body
の
背景 |
class
.hidari
を表示 |
class
.migi
を表示 |
body
の
背景 |
具体的な HTMLリスト ↓
|
【表示例】 ( 実行例 )
|
|
|
|
|
|
| |
【CSSプルダウンメニュー】 スタイルシートを使ってプルダウンメニューを記述が出来ます。 Win版IE6 は対応していません
全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載が必要です。
|
| |
【作成例↓】
|
|
| |
【JavaScriptを使ったメニュー(縦並び)】 JavaScriptを使ってもプルダウンメニューを記述出来ます。
JavaScript外部シートを使って、フレームページのように左のメニューリストを使い回しすることが出来ます。
|
| |
【作成例↓】
【右図 (menu-y.html) のページ構成】
メニュー表示ページ ( menu-y.html ) と
＋
メニューを構成する
外部JavaScriptファイル ＆
外部スタイルシートファイル
( menu-y.js ) ＆ ( menu-y.css ) で構成
【menu-y.html】 【menu-y.js】 【menu-y.css】の具体的リスト ↓
|
【表示例】 ( 実際例 )
|
|
|
|
|
|
| |
【JavaScriptを使ったメニュー(横並び)】
JavaScript外部シートを使って、横並びのメニューリストを使い回しすることも出来ます。
|
| |
【作成例↓】
【右図 (menu-x.html) のページ構成】
メニュー表示ページ ( menu-x.html ) と
＋
メニューを構成する
外部JavaScriptファイル ＆
外部スタイルシートファイル
( menu-x.js ) ＆ ( menu-x.css ) で構成
【menu-x.html】 【menu-x.js】 【menu-y.css】の具体的リスト ↓
|
【表示例】 ( 実際例 )
|
|
|
|
|
|
| |
【レスポンシブル対応メニュー】
画面サイズに対応するレスポンシブルメニューにも対応することが出来ます。 【作成例↓】
|
| |
|
|
| |
【flashを使ったメニュー】 flashを使っても、使い回しメニューが出来ます。
flashを使ったメニューでは、flashメニュー分として、移動範囲を確保しておく必要があります。
|
| |
flash のメニューを作るには、専用のソフトが必要です。 (詳細はこちら)
flash のメニューの表示範囲は、flash の表示範囲内に限定されているので、予めその範囲を用意しておく必要があります。
flash メニューファイル提供しているサイトもあります。
参考1
参考2
|
【表示例】 ( 実際ファイル )
|
|
|
|
