Keeping Navigation Current with PHP

This is probably a very simple way to do this but I can't work it out.

I have used in the past this link:http://alistapart.com/articles/keepingcurrent

This has been great becuase the previous templates I have used have had id="currentpage"

The template I am currently working on uses class="currentpage".

Here is my css code for the menu:

#menu {
background : transparent;
font : 80% sans-serif;
padding-top:20px;
}
#menu ul {
padding : 0.75em 1em;
}
#menu li {
display : inline;
}
#menu li a {
color : #ffffff;
padding : 0.75em 0.5em;
}
#menu li a:hover {
background : #2b548c url(images/navbg2.gif) repeat-x top left;
}
#menu li.selected a {
background : #ffffff url(images/navbg.gif) repeat-x top left;
color : #D14023;
border : 1px solid #2b548c;
border-bottom : 1px solid #ffffff;

}
#menu li.selected a:hover {
background : #ffffff url(images/navbg.gif) repeat-x top left;
color : #D14023;
}

Could any help please so I can get this to work with the A List Apart Article.

Thanks,

James.

welcome here!

you're not realy saying what you need help with. are you asking what part of the (html generating) php needs changing? if so, then post the relevant php code.

The website I have been referring to uses this as a suggestion:

<div id="navigation">
<ul>
<li><a href="#">Page One</a></li>
<li id="currentpage"><a href="#">Page Two</a>
</li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>
</div>


and then turn it into

<div id="navigation">
<ul>
<li<?php if ($thisPage=="Page One")
echo " id=\"currentpage\""; ?>>
<a href="#">Page One</a></li>
<li<?php if ($thisPage=="Page Two")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Two</a></li>
<li<?php if ($thisPage=="Page Three")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Three</a></li>
<li<?php if ($thisPage=="Page Four")
echo " id=\"currentpage\""; ?>>
<a href="#">Page Four</a></li>
</ul>
</div>


however, my code uses:

<div id="navigation">
<ul>
<li><a href="#">Page One</a></li>
<li class="selected"><a href="#">Page Two</a>
</li>
<li><a href="#">Page Three</a></li>
<li><a href="#">Page Four</a></li>
</ul>
</div>


How do I get the <?php if ($thisPage=="Page One") echo " id=\"currentpage\""; ?> converted to class=\"selected\

I hope that makes more sense.

Changing the id to selected should do it in the php code


<div id="navigation">
<ul>
<li <?php if ($thisPage=="Page One")
echo " id=\"selected\""; ?>><a href="#">Page One</a></li>
<li <?php if ($thisPage=="Page Two")
echo " id=\"selected\""; ?>><a href="#">Page Two</a>
</li>
<li <?php if ($thisPage=="Page Three")
echo " id=\"selected\""; ?>><a href="#">Page Three</a></li>
<li <?php if ($thisPage=="Page Four")
echo " id=\"selected\""; ?>><a href="#">Page Four</a></li>
</ul>
</div>

Don't forget, the OP is using a class, not an id…


<div id="navigation">
<ul>
<li<?php if ($thisPage=='Page One') echo ' class="selected"'; ?>><a href="…">Page One</a></li>
<li<?php if ($thisPage=='Page Two') echo ' class="selected"'; ?>><a href="…">Page Two</a></li>
<li<?php if ($thisPage=='Page Three') echo ' class="selected"'; ?>><a href="…">Page Three</a></li>
<li<?php if ($thisPage=='Page Four') echo ' class="selected"'; ?>><a href="…">Page Four</a></li>
</ul>
</div>


Alternatively, you can add a page-specific id or class to the body element and use CSS to control the styling.

e.g. http://www.codingforums.com/showthread.php?t=66597#post349983

I find that using this approach gives me greater flexibility, not only over the CSS, but over any other page-specific content and DOM manipulation that I might wish to do.