CSS PHP Menu 折畳メニュ表示
CSS PHP Menu 折畳メニュ PHP CSS ファイル作成
それでは PHP で CSS を書換えるファイル dummy-1.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢CSS PHP Menu 折畳メニュ表示｣の中の
CSS PHP Menu 折畳メニュ PHP CSS ファイル
から見てください。
まずはそのフロ－チャ－トを掲げます。
ナビファイル css_p1.html が開かれるとすぐ CSS ファイルが読み込まれます。
すると、 PHP CSS ファイル dummy-1.php が動きます。
最初は $_GET["disp"]、$_SESSION["disp"] はともに空ですから
$_SESSION["disp"] = 1;
$dispno = $_SESSION["disp"] = 1;
となります。
次ぎに、CSS ファイルの最初の一行
@charset "utf-8";
を出力します。
そして、#navi_up1～4 の CSS を出力します。
#navi_up1{
display:block
}
#navi_up2{
display:none;
}
･･･････
#navi_up4{
display:none;
}
とします。
ちなみに "¥n" は改行マ－クですよね。
これで、ナビファイル css_p1.php の PHP-CSS ファイルができあがりました。
PHP CSS ファイルに再度やってくるのは！
PHP CSS ファイルに次ぎにやってくるのは、どこかの上位項目がクリックされたときです。
この時 $_GET["disp"]にはクリックされた上位項目番号が入っていますので、
$_SESSION["disp"] = $_GET["disp"];
として、ナビファイル css_p1.php に戻ります。
ナビファイル css_p1.php に戻るとすぐに CSS ファイルが読込まれ、また、PHP CSS ファイル dummy-1.php
にやってきます。
今度は、$_GET["disp"] は空で、$_SESSION["disp"] には展開したい上位項目番号が入っていますから
$dispno = $_SESSION["disp"];
として、CSS ファイルの最初の一行
@charset "utf-8";
を出力し、一旦すべての #navi_up1～4 の CSS を none とし、展開したい #navi_up* を block とします。
ナビファイルが再読込みされたら
ナビファイル css_p1.php が再読込みされたら、当然 CSS ファイル dummy-1.php が動きます。
この時、$_GET["disp"]は空で、$_SESSION["disp"] には 1～4 の値が入っていますから、
$dispno = $_SESSION["disp"];
として、CSS ファイルの最初の一行
@charset "utf-8";
を出力し、一旦すべての #navi_up1～4 の CSS を none とし、展開したい #navi_up* のみを block とします。
この CSS ファイルを読込んだナビファイルはこの CSS に従ってリンク先を展開･収束表示して完了します。
#navi_up1～4 の CSS 出力
echo "#navi_up".$j."{¥n display:".$disp[$j].";¥n}¥n";
の部分は分かりにくいので詳細説明をします。
$j には 1～4 の数字が入っています。
¥n は改行でした。
$disp[$j] には none 又は block の文字が入っています。
よって、この分かりにくい部分は
$j = 1, $disp[$j] = "none" ならば
echo "#navi_up1{
display:none;
}
";
と書下すことができます。
ここまでで、CSS PHP Menu 折畳メニュ表示の PHP CSS ファイルについて説明しました。
引き続きこの PHP CSS ファイルを利用したナビファイルの作成方法について説明していきます。
長くなりましたのでここで一旦切りたいと思います。
CSS PHP Menu 折畳メニュ ナビファイル作成 に続く
CSS PHP Menu 折畳メニュ表示概要 に戻る