「PHPでメニュー画面で現在のファイル名の場合のみ、選択状態にするCSSを追加する。」の編集履歴（バックアップ）一覧に戻る
グローバルナビ等のメニュー画面において現在いるサイトがメニューのものと同じだったときに、その部分の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文でbasename(__FILE__) == "idを追加したい場合のファイル名"を記述し、一致した場合のみidを発行する的なプログラムを書けばコード量が少なくて済むと思います。
