CSS PHP Menu 折畳メニュ表示
CSS PHP Menu 折畳メニュ表示概要
PHP で CSS を書換えることにより動的に開閉が可能でリッチなツリ－メニュを作成します。
これまで、PEAR::HTML_TreeMenu を使用してツリ－メニュを作成しました。
けれども、PEAR ファイルが必要だったりしてシンプルさには少し難点がありました。
ここでは、シンプルさに着目して、折畳メニュを作成することにします。
特に大きなツリ－を生成する場合はスマ－トに見せることができます。
開いた時はこんな感じのメニュになります。
CSS PHP Menu 折畳メニュ表示手法
CSS PHP Menu 折畳メニュ表示手法の原理はそう難しくはありません。
普通にメニュを作成し、折畳込む下位メニュ層 DIV の CSS を
display:none;
にしておき、上位項目をクリックされたら
display:block;
に書換えて下位メニュを表示させるだけです。
至ってシンプルなのですが、PHP で CSS を書換えるところがなかなかトリッキです。
CSS を PHP で書換えるには
まずは、メニュ HTML ファイルの link 要素の CSS ファイルを PHP ファイルにする必要があります。
ここでの CSS ファイル名は、dummy-1.php とします。
すると、
<link async rel="stylesheet" type="text/css"
href = "dummy-1.php?<?php echo date("YmdHis");?>">
と書くことができます。
async はなくてもよいのですが Google さんが付けろと言っているので素直に付けておきます。
ここで重要なことは、CSS ﾌｧｲﾙをｷｬｯｼｭされた CSS から読み込ませないようにすることです。
すなわち、
href = "dummy-1.php?20180709165957
のようにして常に新しい CSS を読ませている点です。
ちなみに、今が 2018年7月3日9時2分9秒 とすると
Y→4桁年 2018
m→2桁月 07
d→2桁日 03
H→24時間 09
i→分 02
s→秒 09
ですから PHP DATE 関数 date("YmdHis") は 20180703090209 となります。
次ぎに、外部 PHP を外部 CSS として認識させる必要があります。
通常、Content-Type ヘッダーで送信文字コードを知らせることができますよね。
header("Content-Type: text/html; charset=utf-8");
だったら、dummy-1.php の最初のヘッダでメディアタイプを text/css として返してやれば、
拡張子が PHP でも CSS として認識してくれるはずです。
よって
<?php
header('Content-Type: text/css; charset=utf-8');
?>
とすれば、CSS を PHP で書くことができることになります。
ここまでで、CSS PHP Menu 折畳メニュ表示の概略を説明しました。
引き続き PHP による CSS ファイル dummy-1.php の作成方法について説明していきます。
長くなりましたのでここで一旦切りたいと思います。
CSS PHP Menu 折畳メニュ PHP CSS ファイル作成 に続く