View Full Version : indicate current page?

01-31-2010, 01:56 AM
This should be easy to find, but I can't.
Just want to indicate "have an up state shown" on my spry menu bar.
Do I need to create an up state in the spry css?
I want it to look the same as my Hover state.

Can I just add/edit the below to show that the user is on the "Service Protocol" page?

<li><a href="service_protocol.html" class="body">Service Protocol</a> </li>

Thanks very much!

01-31-2010, 11:42 PM
Can you clarify your question a bit. What do you mean by an "up state?" Whatever it is, I'm pretty certain you're going to have to edit your CSS rather than the HTML.

01-31-2010, 11:50 PM
Say I have 3 menu bar buttons

the buttons are Home About & Contact

Normally the are White on Grey

When I rollover them they are Green on Grey

When the User is on the Contact page I want the
Home and About buttons to be White on Grey
& have the Contact button Green on Grey

To indicate on the menu bar which page they are on.

Thanks for responding!

01-31-2010, 11:55 PM
Create a new style class .current with the same properties as the hover style and then apply that style to the link for the current page on a page-by-page basis.

02-01-2010, 12:11 AM
I did that
<li class="current"><a href="contact.html" class="current">Contact Us</a></li>
I tried the css style "in this doc only" and in the "horspry.css" is something overiding it? cause the colour won't change to green? I also changed my cursor to be default in the style, but it still gives me the hand when previewed.
Sorry - this is my first Spry menu - everything else went wonderfully.

Thanks again

02-01-2010, 03:00 AM
you're going to have to post a link where we can see your page.

02-01-2010, 06:55 AM
It doesn't work because it indicates that it is still a link, so it take the styles you set for link and hover states. So take the link away... something like this.

<li class="current">Contact Us</li>

02-03-2010, 09:40 AM
Try this....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

a:link {color:#000000} /* unvisited link */
a:visited {color:#000000} /* mouse over link */
a:hover {color:#ff0000} /* mouse over link */
a:active {color:#000000} /* selected link */
#home .home{color:#ff0000}
#about .about{color:#ff0000}
#contact .contact{color:#ff0000}



<body id="contact">

<li><a class="home" href="home.html">Home</a></li>
<li><a class="about" href="about.html">About</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>


Notice I have added an id to the body tag. Re create this for each of the 3 pages changing the body tag id each time. Notice that in the style the body tag id is referenced with the class for the page it is on.

Hope this helps.

Regards Paul

02-04-2010, 01:31 AM
Try something like this to cover both the regular and hover states:

#home a.home , #home a.home:hover { rules go here }