Current page indicator

Get Started
1

Hi There

I have put a very basic image hover button navigation together but have not found a way of showing the current page link in green.

For example if this was the home page the home button will be green and so on.

I have put a test page here:

test

Is there a way to achieve this?

My code is also here:

<html>
<style type="text/css">
.homeBtn{
	display:block;
	width:39px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/homeTest.png') no-repeat left top;
}
.homeBtn:hover{
	background:url('assets/img/homeTest.png') no-repeat left bottom;
}

.newsBtn{
	display:block;
	width:92px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/newsTest.png') no-repeat left top;
}
.newsBtn:hover{
	background:url('assets/img/newsTest.png') no-repeat left bottom;
}

.downloadBtn{
	display:block;
	width:74px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/downloadTest.png') no-repeat left top;
}
.downloadBtn:hover{
	background:url('assets/img/downloadTest.png') no-repeat left bottom;
}



.buyBtn{
	display:block;
	width:91px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/buyTest.png') no-repeat left top;
}
.buyBtn:hover{
	background:url('assets/img/buyTest.png') no-repeat left bottom;
}

.contactBtn{
	display:block;
	width:72px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/contactTest.png') no-repeat left top;
}
.contactBtn:hover{
	background:url('assets/img/contactTest.png') no-repeat left bottom;
}

body {
	background-color: #000000;
}
</style>

</head>

<body>
<a href="#" class="homeBtn">My Link Button</a> 
<br />
<a href="#" class="newsBtn">My Link Button</a>
<br />
<a href="#" class="downloadBtn">My Link Button</a>
<br />
<a href="#" class="buyBtn">My Link Button</a>
<br />
<a href="#" class="contactBtn">My Link Button</a>
<br />

</body>
</html>
2

A good way to do it is to give each page a special class or id:

E.g. on the home page, add a class to the body tag:

<body class=“home”>

Then in the CSS you make rules like this:

.home .homeBtn {
    background:url('assets/img/homeTest.png') no-repeat left bottom;
}
3

DELETE: sorry, post duplicated, not sure why…

4

Hi ralph

i have done what you suggested can you indicate whta it is im doing wrong?

.homeBtn{
	display:block;
	width:39px;
	height:7.5px;
	text-indent:-1000px;
	background:url('assets/img/homeTest.png') no-repeat left top;
}
.home .homeBtn:hover{
	background:url('assets/img/homeTest.png') no-repeat left bottom;
}


<body class="home">
5

Well, a loaded question, because this is not the way to do a list of links. Much better to use an unordered list:


<ul id="menu">
  <li><a href="#" class="homeBtn">My Link Button</a></li>
  <li><a href="#" class="newsBtn">My Link Button</a></li>
  <li><a href="#" class="downloadBtn">My Link Button</a></li>
  <li><a href="#" class="buyBtn">My Link Button</a></li>
  <li><a href="#" class="contactBtn">My Link Button</a></li>
  <li>
</ul>

But anyway, to be specific, you haven’t used the CSS I gave you. :wink:

As well as adding the class to the Body tag, add this to your stylesheet:


.home .homeBtn {
    background:url('assets/img/homeTest.png') no-repeat left bottom;
}
6

Thanks for your help ralph i got it working now!

Thanks again :slight_smile: