php - How to Make Menu Active

659

I have menu as follows

<ul>
    <li><a href="index.php">Home</a></li>
</ul>

how to make it Active when I visit that Page. I tried as follows but no luck

#navigation a:active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

I'm new webie thanks for any suggestions

363

Answer

Solution:

Add id to your code as below

Update

<div id="menu">
  <ul>
    <li id="myHome"><a href="index.php">Home</a></li>
  </ul>
</div>

Write Script as Below

<script>
  window.onload = menuSelect('myHome');
</script>

717

Answer

Solution:

Each page has a class on the body tag that identifies it:

BODY OF HOME PAGE:

<body >
<ul>
  <li><a href="index.php" >Home</a></li> //Each navigation item also includes a class identifying that particular link.
  <li><a href="aboutUs.php" >About Us</a></li>
</ul>
</body>

BODY OF ABOUT US PAGE:

<body >
<ul>
  <li><a href="index.php" >Home</a></li>
  <li><a href="aboutUs.php" >About Us</a></li>
</ul>
</body>

Then you target those classes in your CSS, defining a different state for the current page:

CSS STYLE:

body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;

}

552

Answer

Solution:

In yourindex.php page, you need to edit the HTML this way:

<ul>
    <li><a href="index.php" class="active">Home</a></li>
</ul>

In other pages, sayabout.php, you might have something like this:

<ul>
    <li><a href="index.php">Home</a></li>
    <li><a href="about.php" class="active">About</a></li>
</ul>

And change the CSS to.active and not:active, as the second one is a state of element:

#navigation a.active {
    color: #000;
    background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
    border-bottom-width:0px;
}

410

Answer

Solution:

The:active pseudo-selector is for when an element is well, active, for example while a link is being clicked.

What you will need to do is give your<a> element a class attribute and style it accordingly.

People are also looking for solutions to the problem: php - URL alias or replace with symfony2

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question