メニューを作る
■ メニュー表示 frameを使う iframeを使う スタイルシートを使う CSSプルダウンメニュー  
(使い回しメニュー→)
JavaScriptで垂直枠 JavaScriptで水平枠 flashメニュー    

 
 【frameを使う】 おなじみのメニューは、 frameset を使い、3枚以上のファイルを作って1枚のページを作ります。
    【作成例↓】
framem.htmlのページ構成】


frameb.html

(frameb)

frame-l.html

(hedari)
メニュー

frame-r.html

(migi)
本文

frameb.html

(frameb)


具体的な HTMLリスト
【表示例】 ( 実行例 )
framem.htmlを開きます
 
 【iframeでレイアウト】 iframeを使っても、使い回しの効くメニューに出来ます。
 子ページのiframeから、親ページとなるページに、targetをコントロールしてリンクします。
    【作成例↓】
【右 (iframe-m1.html)のページ構成】


本体
ページ

背景

iframe
を表示

本体
ページ
を表示

本体
ページ

背景



具体的な HTMLリスト
【表示例】 ( 実行例 )
iframe-m1.htmlを開きます

 
 【スタイルシートでレイアウト】 スタイルシートを使ってレイアウトすると、レイアウト変更のし易い記述が出来ます。
 全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載をします。
    【作成例↓】
右 css-m.htmlのページ構成】


body

背景

class
.hidari
を表示

class
.migi
を表示

body

背景



具体的な HTMLリスト
【表示例】 ( 実行例 )
framem.htmlを開きます

 
 【CSSプルダウンメニュー】 スタイルシートを使ってプルダウンメニューを記述が出来ます。 Win版IE6 は対応していません
 全体が一ページ構成なので、左のメニューリストは使い回しは出来ないので、ページ毎に同様の記載が必要です。
    【作成例↓】
【右 css-p.html のページ構成】


メニュー本体ページを作り、
( css-p.htmlのリスト表示 )



枝メニューを通常非表示にするスタイルシートを、
外部シートとして作りました。
( css-p.cssのリスト表示 )
【表示例】 ( 実際例 )
css-p.htmlを開きます

 
 【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】の具体的リスト
【表示例】 ( 実際例 )
menu-y.htmlを開きます

 
 【JavaScriptを使ったメニュー(横並び)】
 JavaScript外部シートを使って、横並びのメニューリストを使い回しすることも出来ます。
    【作成例↓】

【右図 (menu-x.html) のページ構成】


メニュー表示ページ ( menu-x.html ) と

メニューを構成する
外部JavaScriptファイル & 外部スタイルシートファイル
( menu-x.js ) & ( menu-x.css )  で構成




【menu-x.html】 【menu-x.js】 【menu-y.css】の具体的リスト
【表示例】 ( 実際例 )
menu-x.htmlを開きます

 
 【flashを使ったメニュー】 flashを使っても、使い回しメニューが出来ます。 
 flashを使ったメニューでは、flashメニュー分として、移動範囲を確保しておく必要があります。
 

  flash のメニューを作るには、専用のソフトが必要です。 (詳細はこちら)

 flash のメニューの表示範囲は、flash の表示範囲内に限定されているので、予めその範囲を用意しておく必要があります。 flash メニューファイル提供しているサイトもあります。  参考1  参考2

【表示例】 ( 実際ファイル )