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導航菜單高亮選中菜單項

回答

相關問題