CSS/Javascript navigation page identifier script

wildscribe

12-08-2010, 03:34 AM

I am trying to figure out how to code this type of horizontal navigation like this site. http://www.maxdesign.com.au/

When you click on, say, "News", the CSS button turns red and white. I am thinking that this is done with JavaScript and a basic CSS list menu. But I cannot seem to find an example of this the of menu anywhere. The Max Design site is based on WordPress and apparently this navigation uses an API built into the WP framework.

I need this type of horizontal menu for a custom coded CSS and PHP site.

Any and all help would be appreciated. Either code or point me to a tutorial.

Thanks,

WiLd

Kor

12-08-2010, 09:30 AM

No. As far as I can see, there must be a server-side code beneath, not JavaScript, which writes different classes. Or server-side includes.

There might be several solutions. If you say you are using PHP, let us know if you need some examples in PHP.

wildscribe

12-09-2010, 07:06 PM

Hi Kor,

Yes. I am using PHP and a server-side method would be excellent. Could you point me to some examples. As I mentioned in the first post, I want to set up navigation so that the CSS button changes to the page it is on.

All the best,

WiLd

rnd me

12-10-2010, 03:26 AM

you can set a class on <body> on each page of your site, reflecting the location of the page.

your nav has corresponding classes that match up with these sections.

as an example, the about page's body tag could look like
<body class="about">

example html nav
<ul class="nav">
<li class="home"><a href='/'>Home</a></li>
<li class="about"><a href='/about/'>About</a></li>
<li class="contact"><a href='/contact/'>Contact Us</a></li>
</ul>

the css
.nav a {color: blue; }
body.about .nav .about a,
body.home .nav .home a,
body.contact .nav .contact a{ color: green; }

in this fashion the body's class activates a particular navigation item.

no javascript or server processing needed.