CSS导航菜单高亮选中菜单项

-1

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

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>

我需要设置只从左手边第一个主菜单的颜色。然后我只需要改变选择的菜单背景的颜色和whenver我转到其他菜单该菜单的颜色也需要改变和以前在主页

来源

2016-05-12 Ritesh Fondke

你已经做了这样的改变菜单的颜色需要像我。在home.php你，如果你想添加相同的样式到其他页面只是添加到您当前的PHP窗口中使用

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

左右。

class="active"

例如，如果你在about.php然后打开文件，并将其改为看起来像这样。还要确保其他的href标签没有相同的活动类。

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

如果你想更好的风格，它只是找到或在你的CSS文件中创建活动类

.active { 
background-color: red; 
}

来源

2016-05-12 07:48:22 Frutis

我改变了我的home.php文件中添加类=“活动”，但是当我点击了解我们其菜单 –

的颜色不变，你必须在你的关于我们页面中做同样的事情。在 About us所在的位置添加活动课程。 About US – Frutis

我也改变了我的关于us.php，但菜单颜色不变 –

CSS导航菜单高亮选中菜单项

回答

相关问题