1 トップナビバー

 トップナビバー   横長・縦展開メニュー
  1. ハイライトトップメニュー  デモ
  2. トップナビバー  
  3. トップナビバー 2 3 4 4a4a: デフォルト all
  4. トップナビバー 4b 上・下フレーム式。 all
  5. トップナビバー 4c 配置変更、表示/非表示。
  6. トップナビバー 4d定位置。 all
  7. トップナビバー 5定位置。 リロード要。
  8. トップナビバー 6all
  9. トップナビバー 7        
  10. トップナビバー 7a
  11. トップナビバー 8 高速。IE4.x〜
  12. トップナビバー 9 all
  13. トップナビバー 9 フレーム プルダウンメニュー+上下フレーム。 all
  14. トップナビバー 10  Java Applet、マウスオーバー展開、サウンド付き。 all
  15. トップナビバー 10 フレーム マウスオーバー・サウンド+上下フレーム。 all
  16. トップナビバー 11 11a マウスオーバー・緩作動。 11a : バー指定。 all
  17. トップナビバー 12 高速。 IE4.x〜
  18. トップナビバー 13DHTML、CSS、定位置。
  19. トップナビバー 14フェード効付き。  all
  20. トップナビバー 14フレーム フェード効果。上下フレーム all
  21. トップナビバー 15 フェード効果、痕跡、アイコンのカスタマイズ。  all
  22. ブメニュー 2上・下フレームを選択。 all
  23. タブメニュー 4タブ切り換え、。  ie5.x〜
  24. タブメニュー 5IFRAMEとプルダウンメニュー。   ie5.5〜

 2 IFRAME、DIV

 IFRAME、DIV     

  1. IFRAME DIV DHTML、CSS、Win全体のIFRAMEにターゲットを表示。all
  2. IFRAME-プルダウン DHTML、プルダウンメニューでIFRAMEのターゲットを指定。 IE4.x/N6.x〜
  3. IFRAME-プルダウン 2 IFRAMEのターゲットを指定。 IE4.x/N6.x〜
  4. IFRAME_SCR IFRAMEのコンテンツのスクロール、クリックで繰り返し。 IE4.x/N6.x〜
  5. メッセージスクロール 8 IFRAME、自動スクロール、マウスオンでストップのメッセージフレーム。IE5.x〜/N6.x〜
  6. DIV_0CSS、Positioning。 画像、マルチメディア要素など任意に配置。 all
  7.   ドラッグ・サイズ変更 HTMLコンテンツを入れたDIVコンテナの移動・サイズ変更。 IE4.x〜
  8. ジグソーパズル<DIVコンテナによるジグソーパズル。 IE4.x/NN4.x〜
  9. ドラッグ・ドロップCSS、画像+テキストが自由にドラッグ配置。
  10.  

 3 画像いろいろ

 ここに、コンテンツ3 を記述します。
 クリック → フルサイズ 
 クリック → フルサイズ 
 クリック → フルサイズ 

 4 最新DHTML

ここに、コンテンツ4 を記述します。

< top (*1) (*2)
  編集 Google
IFRAME、CSS、DOM -サンプル
 ドキュメントインーDOM
 IFRAME 5
 タブメニュー5
 IFRAME-プルダウン
 クールバー 2
Java/JavaScript/DHTML -サンプル
 トップナビ14+フレーム
 階層メニュー4+フレーム
 折り畳みメニュー
 トップナビバー9+フレーム
 クールバー

 

 

 

 

 

 

 

ホーム へ       サンプルページ  DIV_1  div_1.htm

<

<DIV>タグ、CSS Positioningのコンテナによる配置+折り畳みコンテンツです。    ポップメニューの背景色の、透過色への変更方法 。    DHTML。    コンテンツとサイズ、配置のカスタマイズ可能。    Internet Explorer4.x〜 対応。     コピー、編集し、簡単にWebで応用できまっ、(^ ^)。      関連情報 : always_on_top5a.htm(Winのスクロールに流されず、定位置保持。)

デモは、Winサイズの変更や、 ” 1 トップナッバー などのクリック → 折り畳み/展開で。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、div_1.htmbullet.gifbullet3.gif(任意)を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

・ このDHTMLの実装方法は、div_1.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、<head> 〜</head> の任意の行間に (*1) を、さらに <body> 〜</body> の任意の行間に (*2) をペーストします。

・ 編集方法は、hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、 (*2) を参考に太字部分の編集を任意に行います。   アイコン画像などの変更は準備した画像ファイル名を 、hogehoge.html などの該当部分に記述。     ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 4.x〜 などで開いて。    更新の確認は、ieやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web& Internet SamplesWeb DevelopmentXMLDHTMLとは?ColorTableHTMLの色指定色見本

 

(*1) div_1.htm (例)         挿入先の  <head> 〜 </head>の、部分にペーストします。

HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type 〜</style>は(削除可)

マウスオーバー時のテキスト  背景色 下線非表示

 

非マウスオーバー時の下線表示(逆も可)

 

リンクを新しいWinで開くを標準(削除可)<※:target= いろいろ

同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"

お気に入り、タスクバーに表示するページ名(≠ファイル名)

折り畳みコンテンツのJavaScriptソ-ス

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconj.ico">

<style type="text/css"><!-- A:hover {

COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none

}

A {

TEXT-DECORATION: underline

}

-->

</style>

<base target="_blank">

<title>サンプルページ  DIV_1</title>

<

<script language="JavaScript1.2">

<!--

====  この間、説明を省略。  ====

//-->

</script>

 

(*2) div_1.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

<

ポップメニューのサイズ /配置 連番 背景色指定(ナシ は透過)

ポップメニューに表示コンテンツのHTML

折り畳みタグ 吹き出し 折り畳みインデックスタブ

以下、同様。

 

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<

<!--  説明:  width=幅  height=高さ  top=左上からの縦位置  left= 〃 の横位置  position=配置  background-color=背景色 -->

<DIV style="width:150px; height:130px; top:20px; right:10; position:absolute; z-index:1; visibility:visible; background-color:#EAE5F2;" id="Layer1">

<h4 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])" title="クリック → \^o^/・(>_<) 横長縦展開のプルダウンメニュー(例)いろいろ"> 1 トップナビバー </h4>

<span style="display:none" style="&amp;{head}">

<span style="background-color: rgb(86,62,91); color: rgb(255,240,244)">

====  この間、説明を省略。  ====

<a href="http://xml-xsl.sakura.ne.jp/tab_menu5.htm" style="text-decoration: none">タブメニュー 5</a>IFRAMEとプルダウンメニュー。   <span style="background-color: rgb(67,53,79); color: rgb(255,238,253)">ie5.5〜</span></font></li>

</ol></span>

<h4 onclick="doit(document.all[this.sourceIndex+1])" style="CURSOR: hand" title="クリック → \^o^/・(>_<) IFRAME、DIV応用コンテンツ(例)いろいろ"> 2 IFRAME、DIV</h4>

<span style="DISPLAY: none">

<p>

<span style="background-color: rgb(68,32,39); color: rgb(255,244,250)">

====  この間、説明を省略。  ====

<li> </li>

</ol>

</span></p>

<h4 onclick="doit(document.all[this.sourceIndex+1])" style="CURSOR: hand" title="クリック → \^o^/・(>_<) 画像からのハイパーリンク(例)いろいろ"> 3 画像いろいろ</h4>

<span style="DISPLAY: none">

<p><font size="2">ここに、コンテンツ3 を記述します。</font><br> <a

====  この間、説明を省略。  ====

src="http://xml-xsl.sakura.ne.jp/916709t.jpg" border="0" width="96" height="61"></a> </span></p>

<h4 onclick="doit(document.all[this.sourceIndex+1])" style="CURSOR: hand" title="クリック → \^o^/・(>_<) 最新DHTML(例)いろいろ"> 4 最新DHTML</h4>

<span style="DISPLAY: none">

<p><font size="2">ここに、コンテンツ4 を記述します。 </font>

====  この間、説明を省略。  ====

 </font><a href='http://xml-xsl.sakura.ne.jp/corner.htm' title="IE、Win2000などに搭載中のクールなツールバー、痕跡。" target="_blank"><font size="2">クールバー</font></a></p>

</span>

</div>

< 補足 >    適時参照あれ!。

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。