「PHPでメニュー画面で現在のファイル名の場合のみ、選択状態にするCSSを追加する。」の編集履歴(バックアップ)一覧はこちら

PHPでメニュー画面で現在のファイル名の場合のみ、選択状態にするCSSを追加する。」(2015/07/24 (金) 17:01:28) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

グローバルナビ等のメニュー画面において現在いるサイトがメニューのものと同じだったときに、その部分のCSSにidセレクターを追加し、色を変える方法を書いていきたいと思います。 jQueryで作ってもよさそうな気もしますが、PHPの方がコードが少なくてすみそうだったのでこちらをまずは作ってみます。7月24日記事 ~ ~ イメージ #image(width=600,menu.png) *デフォルトコード HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>メニュー</title> </head> <body> <div class="menunav"> <ul id="menu"> <li><a href="index.php">ホーム</a></li> <li><a href="news.php">新着情報</a></li> <li><a href="about.php">試験概要</a></li> <li><a href="problem.php">過去問広場</a></li> <li><a href="contact.php">お問い合わせ</a></li> </ul> </div> </body> </html> CSS @charset "utf-8"; /* CSS Document */ .menunav ul#menu { margin: 20px 20px 0px 20px; padding: 0px; height: 40px; } .menunav ul#menu li { float: left; width: 180px; height: 40px; list-style-type: none; } .menunav ul#menu a { background: #000; color: #FFF; line-height: 40px; text-align: center; text-decoration: none; display: block; width: 100%; height: 100%; } .menunav ul#menu a:hover { background: #CCC; color: #000; } *選択されている状態の時 HTML <ul id="menu"> <li><a id="selected" href="index.php">ホーム</a></li> <li><a href="news.php">新着情報</a></li <li><a href="about.php">試験概要</a></li> <li><a href="problem.php">過去問広場</a></li> <li><a href="contact.php">お問い合わせ</a></li> </ul> CSS 以下を追記 .menunav ul#menu a#selected{ background: #EEE; color: #000; } *PHPで表現 HTMLに以下を追加 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>メニュー</title> </head> <body> <div class="menunav"> <ul id="menu"> <li><a <?php if(basename(__FILE__) == "index.php") echo 'id="selected"';?>href="index.php">ホーム</a></li> <li><a <?php if(basename(__FILE__) == "news.php") echo 'id="selected"';?>href="news.php">新着情報</a></li> <li><a <?php if(basename(__FILE__) == "about.php") echo 'id="selected"';?>href="about.php">試験概要</a></li> <li><a <?php if(basename(__FILE__) == "problem.php") echo 'id="selected"';?>href="problem.php">過去問広場</a></li> <li><a <?php if(basename(__FILE__) == "contact.php") echo 'id="selected"';?>href="contact.php">お問い合わせ</a></li> </ul> </div> </body> </html> *まとめ タグの中に、<?phpを埋め込み、if文で&color(red){basename(__FILE__) == "idを追加したい場合のファイル名"を記述し}、一致した場合のみidを発行する的なプログラムを書けばコード量が少なくて済むと思います。
グローバルナビ等のメニュー画面において現在いるサイトがメニューのものと同じだったときに、その部分のCSSにidセレクターを追加し、色を変える方法を書いていきたいと思います。 jQueryで作ってもよさそうな気もしますが、PHPの方がコードが少なくてすみそうだったのでこちらをまずは作ってみます。7月24日記事 ~ ~ イメージ #image(width=600,menu.png) *デフォルトコード HTML <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>メニュー</title> </head> <body> <div class="menunav"> <ul id="menu"> <li><a href="index.php">ホーム</a></li> <li><a href="news.php">新着情報</a></li> <li><a href="about.php">試験概要</a></li> <li><a href="problem.php">過去問広場</a></li> <li><a href="contact.php">お問い合わせ</a></li> </ul> </div> </body> </html> CSS @charset "utf-8"; /* CSS Document */ .menunav ul#menu { margin: 20px 20px 0px 20px; padding: 0px; height: 40px; } .menunav ul#menu li { float: left; width: 180px; height: 40px; list-style-type: none; } .menunav ul#menu a { background: #000; color: #FFF; line-height: 40px; text-align: center; text-decoration: none; display: block; width: 100%; height: 100%; } .menunav ul#menu a:hover { background: #CCC; color: #000; } *選択されている状態の時 HTML <ul id="menu"> <li><a id="selected" href="index.php">ホーム</a></li> <li><a href="news.php">新着情報</a></li <li><a href="about.php">試験概要</a></li> <li><a href="problem.php">過去問広場</a></li> <li><a href="contact.php">お問い合わせ</a></li> </ul> CSS 以下を追記 .menunav ul#menu a#selected{ background: #EEE; color: #000; } *PHPで表現 HTMLに以下を追加 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>メニュー</title> </head> <body> <div class="menunav"> <ul id="menu"> <li><a <?php if(basename(__FILE__) == "index.php") echo 'id="selected"';?>href="index.php">ホーム</a></li> <li><a <?php if(basename(__FILE__) == "news.php") echo 'id="selected"';?>href="news.php">新着情報</a></li> <li><a <?php if(basename(__FILE__) == "about.php") echo 'id="selected"';?>href="about.php">試験概要</a></li> <li><a <?php if(basename(__FILE__) == "problem.php") echo 'id="selected"';?>href="problem.php">過去問広場</a></li> <li><a <?php if(basename(__FILE__) == "contact.php") echo 'id="selected"';?>href="contact.php">お問い合わせ</a></li> </ul> </div> </body> </html> *まとめ タグの中に、<?phpを埋め込み、if文で&color(red){basename(__FILE__) == "idを追加したい場合のファイル名"を記述し}、一致した場合のみidを発行する的なプログラムを書けばコード量が少なくて済むと思います。 ~ ~ 以上

表示オプション

横に並べて表示:
変化行の前後のみ表示: