CSS PHP Menu 折畳メニュ

CSS PHP Menu 折畳メニュナビファイル作成

それでは PHP で CSS を書換えるナビファイル css_p1.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢CSS PHP Menu 折畳メニュ表示｣の中の
CSS PHP Menu 折畳メニュナビファイル
から見てください。
よくあるシンプルなナビファイルとほとんど変わりません。

CSS と JS ファイルの読込み

普通に、CSS と JS ファイルを読込みます。
特に問題点はありません。
<link async rel = "stylesheet" href="css/css_pp.css">
<script async src = "js/tree_m.js" type = "text/javascript">
</script>
この二つのファイル内容は後で説明します。
次ぎが肝心のところです。
PHP で書かれた CSS を読込みます。
<link async rel = "stylesheet" type = "text/css" href = "dummy-1.php">
普通ならば CSS ファイルなのでファイル名は *.css となるはずですが、ここでは dummy-1.php になっている点に注意してください。
また
href = "dummy-1.php?<?php echo date("YmdHis");?>">
として CSS がキャッシュから読み込まれるのを防止している点にも留意してください。

ナビの上位項目を作成する

上位項目は
<li><a href = "dummy-1.php?disp=1"> Styles</a></li>
のように作成します。
｢Styles｣をクリックすると disp=1 のパラメ－タを $_GET["disp"] という箱に格納して dummy-1.php に飛んで行きます。
dummy-1.php では $_GET["disp"] から｢1｣という値を取り出して処理をします。
どう処理をするかは、
CSS PHP Menu 折畳メニュ PHP CSS ファイル作成
を参照してください。

上位項目の中のリンク先を作成する

次ぎに上位項目の中のリンク先を
div id="navi_up1"
の中に作成します。
この div は PHP CSS で展開したり、収束したりします。


 <div id="navi_up1" class="navi_up">
  <li><a href="css_p1.php">トップ
  </a></li>
  <li>
  <a href = "http://www.google.co.jp/"
   target= "_blank">Google</a></li>
  <li><a href="#">Style #3</a></li>
  <li><a href="#">Style #4</a></li>
 </div>

そして、他の上位項目も、それぞれ、div id="navi_up*" の中に作成します。

メニュ直接表示切換 HTML ファイル表示場所作成

<div id="main">
の中にある
<iframe class="keya" src="css_pp_1.html" name="answer" frameborder="0" scrolling ="no"> </iframe>
はメニュから表示を切り換える HTML ファイル表示場所です。
ここには、起動時はスタ－トの HTML ファイルを表示し、その後はメニュからクリックされた HTML ファイル内容を表示します。
ちなみに iframe の属性には

src
フレーム表示する文書のURL
name
フレーム名
width
フレームの横幅
height
フレームの高さ

を指定するのでしたね。
なお、iframe 要素において HTML5 では frameborder 及び scrolling 属性が廃止されたとの情報がありますが、現状はまだ有効のようです。
ちなみに、
<li><a href="css_pp_2.html" target="answer">CSS-PHP Menu の歴史</a></li> と書くと、｢CSS-PHP Menu の歴史｣をクリックすると、この div id="main" の中の表示が切換ります。

通常の CSS ファイル css_pp.css の作成

それでは通常の CSS ファイル css_pp.css を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢CSS PHP Menu 折畳メニュ表示｣の中の
CSS PHP Menu 折畳メニュ CSS ファイル
から見てください。
シンプルな内容です。
特に説明はいらないと思います。

JS ファイル tree_m.js の作成

このファイルは、リンク時、強制的に別ブラウザが立上がる(ポップアップ表示) JavaScript Function です。
ファイル内容は、
63Pear Village に戻り
左サイドナビ｢TreeMenu 折畳メニュ表示｣の中の
TreeMenu 折畳メニュ表示 JavaScript ファイル
から見てください。
TreeMenu 折畳メニュ表示
TreeMenu 折畳メニュ表示ファイル作成準備
リンク時、強制別ウィンドウ立上 JavaScript Function 作成
のなかで説明したファイルと同じものです。
ファイル名 tree_m.js も変えていません。