CODEWITHSUNDEEP
phpjqueryhtmlcss
Nag
Nag

Reputation: 21

How to Make Menu Active

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

Upvotes: 0

Views: 99

Answers (4)

Prawny
Prawny

Reputation: 123

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.

Upvotes: 0

Sha
Sha

Reputation: 506

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>

Upvotes: 1

Kiran Dash
Kiran Dash

Reputation: 4956

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

BODY OF HOME PAGE:

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

BODY OF ABOUT US PAGE:

<body class="aboutUs">
<ul>
    <li><a href="index.php" class="home">Home</a></li>
    <li><a href="aboutUs.php" class="aboutUs">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;

}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

In your index.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, say about.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;
}

Upvotes: 0

Related Questions