nicepaper @ ウィキ
nicepaper @ ウィキ

グローバルナビ等のメニュー画面において現在いるサイトがメニューのものと同じだったときに、その部分のCSSにidセレクターを追加し、色を変える方法を書いていきたいと思います。 jQueryで作ってもよさそうな気もしますが、PHPの方がコードが少なくてすみそうだったのでこちらをまずは作ってみます。7月24日記事

イメージ

デフォルトコード

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を発行する的なプログラムを書けばコード量が少なくて済むと思います。

以上

「PHPでメニュー画面で現在のファイル名の場合のみ、選択状態にするCSSを追加する。」をウィキ内検索
最終更新：2015年07月24日 17:01
添付ファイル