Question

我开发了一个CSS导航菜单，并为每个导航项编写了php.file。

homepage.php

enter image description here

<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>

的 aboutus.php

enter image description here

    <?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>

我需要设置首先从左边manu的主菜单的颜色。然后我需要更改所选菜单背景的颜色当我导航到另一个菜单时，菜单颜色也需要改变以前改变了菜单的颜色需要，就像我在主页上一样

Answer 1

你已经这样做了。在home.php中你使用

HTML

因此，如果您想将相同的样式添加到其他页面，只需将其添加到当前的php窗口。

<a href="../riteshproject/home.php" class="active">

例如，如果你在about.php上然后打开文件并将其更改为如下所示。还要确保其他href标签没有相同的活动类。

class="active"

如果你想更好地设计它，只需在你的css文件中找到或创建活动类

<a href="../riteshproject/aboutus.php" class="active">About US</a>

CSS导航菜单突出显示所选菜单项

1 个答案: