-1
私はCSSナビゲーションメニューを開発しました。ナビゲーション項目ごとにphp.fileを書いています。CSSナビゲーションメニュー選択されたメニュー項目をハイライト表示
homepage.php
<html>
<head>
<title>My First Try Of CSS Navigation Bar</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/*
End navigation bar styling. */
/* This is just styling for this
specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #fff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Shree Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. -->
<ul id="nav">
<li><a href="riteshproject/home.php">Home</a>
</li>
<li><a href="#">About US</a>
</li>
<li><a href="#">Contact
US</a>
</li>
<li><a href="#">Login</a>
</li>
</ul>
<!-- That's it! -->
<div id="content">Area
<tr>
<td height="20px" />
<td style="text-align:left">
<select name="leavetype" id="leavetype">
<?php $query="select code,areaname from areamaster" ; $query_run=mysql_query($query); mysql_num_rows($query_run); while($row=mysql_fetch_assoc($query_run)) { ?>
<option value="<?php echo $row['code']?>">
<?php echo $row[ 'areaname']?>
</option>
<?php } ?>
</select>
</td>
</tr>
</div>
</body>
</html>
<?php include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<html>
<head>
<title>Shree Shree Property,Kolhapur</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 5em 0;
padding: 0;
list-style: none;
background-color: #f3f3f3;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul.primary li:hover a {
background: pink;
color: #666;
text-shadow: none;
}
#nav li {
float: left;
background: #0080ff;
}
#nav li a {
display: block;
padding: 8px 17.5px;
text-decoration: none;
font-weight: bold;
color: black;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: black;
background-color: #00bfff;
}
/* End navigation bar styling. */
/* This is just styling for this specific page.
*/
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #00bfff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
h4 {
font-size: 1.1em;
float: center;
padding: 1em 8px;
color: #333;
background-color: #00bfff;
margin: 0;
-webkit-align-content: center;
align-content: center;
}
#content {
padding: 1em 8px;
}
#current a {
color: #ff0000;
}
#dddd {
color: red;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<form name="tstest" action="test20.php" onsubmit="return CommonFunction(this); method=" POST "> <h1>Shree
Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. --> <ul id="nav ">
<li><a href="../riteshproject/home.php " class="active ">Home</a></li> <li class="current " id="dddd "><a
href="../riteshproject/aboutus.php ">About US</a></li> <li><a
href="# ">Contact US</a></li>
<li><a href="# ">Login</a></li> <li><a href="# ">Add Property</a></li> <li><a href="# ">Luxarious Property</a></li>
<li><a href="# ">Property For Sale</a></li> <li><a href="# ">Other
Services</a></li> </ul> <!-- That's it! --> <div> <html>
<body> <div id="wrap ">
<h4>Shree Shree Property<h4> <p>Shree Shree Property provides
leading property consultancy in Kolhapur</p> </div>
<body> </html> </form> </table> </div> </div>
</body> </html>
左のメニューから1番目のホームメニューのみの色を設定する必要があります。その後、 私は、選択したメニューの背景 の色を変更する必要があると私は別のメニューに移動whenverメニューの色も を変更する必要があり、以前のホームページで、私などのメニューの色の必要性を変え
あなたのCSSファイルでアクティブなクラスを作成しますが、私は程度にクリックしたときに、より良い、それをスタイルしたい場合私たちのメニューの色を変更していない –
あなたは私たちについて私たちのページで同じを行う必要があります。 About usがアクティブなクラスを追加します。 About US – Frutis
私もus.phpについては変わりますが、メニューの色は変わりません –